Как задать класс active первому элементу по умолчанию?

Question

[I_want_to_know]

Друзья, всем мира и здоровья!
Подскажите пожалуйста, как решить задачу.
Условия такие:
Есть несколько элементов на странице у всех одинаковый класс и одинаковые стили.
Нужно, что бы при загрузке страницы, первому элементу из списка присваивался класс active.
А при клике на любой иной элемент этой группы, класс active у первого элемента удалялся, и присваивался к выбранному пользователем элементу.
Для полной картины вот код элементов:

<?php
      $args = array(
        'post_type' => 'brends',
        'post_status' => 'publish',
        'posts_per_page' => -1,
      );
      $wc_query = new WP_Query($args);
      if ($wc_query->have_posts()) :
        while ($wc_query->have_posts()) : $wc_query->the_post();
      ?>

          <label class="logo-brand">
            <input type="radio" name="brand_id" value="<?php the_ID(); ?>" />
            <span>

              <img class="img__logo-brand" src="<?php the_field('logo_brands'); ?>" alt="<?php the_title(); ?>" />
            </span>
          </label>

      <?php endwhile;
      endif; ?>

При попытке добавить active в верстку, разумеется этот класс автоматом присваивается ко всем элементам.
Пытался добавить через JS, и как результат, для первого элемента действительно класс добавлялся, но не переключался на другие элементы.
Вот JS

var label = document.querySelector('.logo-brand');
label.classList.add('logo-brand__active');

var label = document.querySelector('.logo-brand');
label.addEventListener('click', function() {
  var isActive = label.classList.contains('logo-brand__active');
	if (isActive) {
    label.classList.remove('logo-brand__active');
  } else {
    label.classList.add('logo-brand__active');
  }
});

Спасибо за ваше участие...

Comments

[Ankhena]

При попытке добавить active в верстку, разумеется этот класс автоматом присваивается ко всем элементам.

Это "разумеется" лишь потому что это у вас так сделано. А не потому что так всегда.
И я бы, пожалуй, голосовала за то, чтобы это было проделано как бэке, а не потом js'ом на клиенте.

Answer 1

[Алексей Ярков]

Замените while на for и смотрите на счётчик. Если он равен 0, то добавляем класс. Что-то типа такого:

<label class="logo-brand<?php i === 0 ? ' active' : ''?>">

В JS надо получить все элементы, циклом пройти навесить обработчик. В обработчике сначала удаляем класс у всех элементов, а потом присваиваем выбранному.

Answer 2

[Владимир Е]

Алексей указал верное решение
Если не хотите переписывать цикл, то добавьте переменную перед while

if ($wc_query->have_posts()) :
       $i = 0;
        while ($wc_query->have_posts()) : $wc_query->the_post();
      ?>

          <label class="logo-brand<?php i === 0 ? ' active' : ''?>">
            <input type="radio" name="brand_id" value="<?php the_ID(); ?>" />
            <span>

              <img class="img__logo-brand" src="<?php the_field('logo_brands'); ?>" alt="<?php the_title(); ?>" />
            </span>
          </label>

      <?php
            $i++;
            endwhile;