Добавить класс нужному элементу списка [дубликат]

245

03 июля 2017, 18:28

На данный вопрос уже ответили:

Как убрать активный класс с элемента при клике, если он уже имеет этот класс? 2 ответа

Здравствуйте, есть список

<ul class="gallery-list">
      <li>
        <a href="" class="gallery-link gallery-list-active">Автомобили</a>
      </li>
      <li>
        <a href="#" class="gallery-link">Автобусы</a>
      </li>
      <li>
        <a href="#" class="gallery-link">Микроавтобусы</a>
      </li>
      <li>
        <a href="#" class="gallery-link">Яхты</a>
      </li>
      <li>
        <a href="#" class="gallery-link">Катера</a>
      </li>
      <li>
        <a href="#" class="gallery-link">Теплоходы</a>
      </li>
    </ul>

Как сделать добавление класса 'gallery-list-active' по клику и при этом нужно удалить класс у другого элемента, чтобы активный был только один.

Сделал такой код

var gallery = document.querySelector('.gallery-list');
var link = document.querySelectorAll('.gallery-link');
for (var i=0; i<link.length; i++) {
  link[i].addEventListener('click', function(evt) {
    evt.preventDefault();
    if ($(this).hasClass('gallery-list-active')) {
      $(this).removeClass('gallery-list-active');
    }
    else {
      $(this).addClass('gallery-list-active');
    }
  })
}

Но он работает как toggle для каждого элемента списка, но не удаляет класс у других элементов.

Answer 1

var gallery = document.querySelector('.gallery-list'); 
var link = document.querySelectorAll('.gallery-link'); 
 
for (var i=0; i<link.length; i++) { 
  link[i].addEventListener('click', function(evt) { 
    evt.preventDefault(); 
    link.forEach(c => { 
      c.classList.remove('gallery-list-active'); 
    }) 
      $(this).addClass('gallery-list-active'); 
  }) 
}

.gallery-list-active { 
color: red; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ul class="gallery-list"> 
      <li> 
        <a href="" class="gallery-link gallery-list-active">Автомобили</a> 
      </li> 
      <li> 
        <a href="#" class="gallery-link">Автобусы</a> 
      </li> 
      <li> 
        <a href="#" class="gallery-link">Микроавтобусы</a> 
      </li> 
      <li> 
        <a href="#" class="gallery-link">Яхты</a> 
      </li> 
      <li> 
        <a href="#" class="gallery-link">Катера</a> 
      </li> 
      <li> 
        <a href="#" class="gallery-link">Теплоходы</a> 
      </li> 
    </ul>

Answer 2

Все верно, потому что вы проверяете наличи только у даного класа, а нужно у всех и у всех забирать.

if ($(this).hasClass('gallery-list-active')) {
  $(this).removeClass('gallery-list-active');
}

Вместо этого нужно снова вызвать цикл тот же и убрать класс у всех его элеметов

var gallery = document.querySelector('.gallery-list'); 
var link = document.querySelectorAll('.gallery-link'); 
 
for (var i=0; i<link.length; i++) { 
  link[i].addEventListener('click', function(evt) { 
    evt.preventDefault(); 
    link.forEach(c => { 
      c.classList.remove('gallery-list-active'); 
    }) 
      $(this).addClass('gallery-list-active'); 
  }) 
}

.gallery-list-active { 
color: red; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ul class="gallery-list"> 
      <li> 
        <a href="" class="gallery-link gallery-list-active">Автомобили</a> 
      </li> 
      <li> 
        <a href="#" class="gallery-link">Автобусы</a> 
      </li> 
      <li> 
        <a href="#" class="gallery-link">Микроавтобусы</a> 
      </li> 
      <li> 
        <a href="#" class="gallery-link">Яхты</a> 
      </li> 
      <li> 
        <a href="#" class="gallery-link">Катера</a> 
      </li> 
      <li> 
        <a href="#" class="gallery-link">Теплоходы</a> 
      </li> 
    </ul>

var gallery = document.querySelector('.gallery-list'); 
var link = document.querySelectorAll('.gallery-link'); 
 
link.forEach(c => { 
  c.addEventListener('click', () => { 
    link.forEach(s => s.classList.remove('gallery-list-active')); 
    c.classList.add('gallery-list-active'); 
  }) 
})

.gallery-list-active { 
color: red; 
}

<ul class="gallery-list"> 
      <li> 
        <a href="" class="gallery-link gallery-list-active">Автомобили</a> 
      </li> 
      <li> 
        <a href="#" class="gallery-link">Автобусы</a> 
      </li> 
      <li> 
        <a href="#" class="gallery-link">Микроавтобусы</a> 
      </li> 
      <li> 
        <a href="#" class="gallery-link">Яхты</a> 
      </li> 
      <li> 
        <a href="#" class="gallery-link">Катера</a> 
      </li> 
      <li> 
        <a href="#" class="gallery-link">Теплоходы</a> 
      </li> 
    </ul>