Альтернативы .addClass() и .removeClass()

281

09 декабря 2017, 09:26

Являюсь новичком в деле JS-разработки. Опыт написания работоспособных программ был. На данный момент самым бросающимся в глаза недостатком моих скриптов является их громоздкость. Ниже опишу подробно в чём она заключается.

Допустим у меня есть такой код.

<ul class="ul">
    <li>recommended</li>
    <li>latest</li>
    <li>highlightes</li>
</ul>

Что требуется от JS и JQ? При нажатии на один из элементов списка, этот элемент списка меняет цвет; соответственно этим цветом может быть выделен только один элемент.

Что мне предлагает мой опыт? Во-первых, каждому элементу списка присвоить идентификатор. Во-вторых, одному из элементов присвоить класс (.active), а в стилях прописать его. Итого:

<style>
    .active {
        color: red;
    }
</style>
<ul class="ul">
    <li class="active" id="li_1">recommended</li>
    <li id="li_2">latest</li>
    <li id="li_3">highlightes</li>
</ul>

Новичку на первый взгляд может показаться, что достаточно прописать цепочку методов для каждого идентификатора.

$("#li_1").click(function() {
    $("#li_1").addClass("active");
}
$("#li_2").click(function() {
    $("#li_2").addClass("active");
}
$("#li_3").click(function() {
    $("#li_3").addClass("active");
}

Конечно, корявенько, поскольку не оптимизировано. Но, как Вы уловили, код ещё не выполняет своё предназначение: он только добавляет класс, и не просто добавляет, а необратимо. То есть нажав на один элемент списка он станет красным, нажав на второй - красным станет и он, нажав на третий - все элементы списка покраснеют. Что на этот раз нам подскажет скудный опыт новичка? Верно, в каждой функции-кликанью прописать цепочку методов, убирающей класс .active у других идентификаторов. И код будет выглядеть следующим образом.

$("#li_1").click(function() {
    $("#li_1").addClass("active");
    $("#li_2").removeClass("active");
    $("#li_3").removeClass("active");
}
$("#li_2").click(function() {
    $("#li_2").addClass("active");
    $("#li_1").removeClass("active");
    $("#li_3").removeClass("active");
}
$("#li_3").click(function() {
    $("#li_3").addClass("active");
    $("#li_1").removeClass("active");
    $("#li_2").removeClass("active");
}

Как Вы, уважаемые эксперты, смогли заметить, код избыточно разбух. Именно это я в начале назвал громоздкостью кода. Пример выше - небольшая иллюстрация. Мне приходилось писать длинные полотна, где в списке не 3 элемента, где-то 6-7, а в тебе функции класс менять не только одному какому-то элементу странице, а нескольким. Такой скрипт занимал более 2 экранов пролистывания.

В общем мой вопрос в следующем. Как можно сжать, оптимизировать скрипт, аналогичный продемонстрированному выше?

Answer 1

$(".ul > li").click(function() { 
  $(this).addClass("active").siblings().removeClass("active"); 
});

.active { 
  color: red; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ul class="ul"> 
  <li>recommended</li> 
  <li>latest</li> 
  <li>highlightes</li> 
</ul>

Если повторное щелканье по подсвеченному элементу должно его отключать:

$(".ul > li").click(function() { 
  $(this).toggleClass("active").siblings().removeClass("active"); 
});

.active { 
  color: red; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ul class="ul"> 
  <li>recommended</li> 
  <li>latest</li> 
  <li>highlightes</li> 
</ul>

Answer 2

var ul = document.querySelector(".ul");
var li = ul.querySelectorAll("li");
ul.addEventListener('click', function(evt){
  li.forEach(function(item) {
    item.classList.toggle('active',false);
  });
  evt.target.classList.toggle('active');
})