сохранить переменный или целевой весь класс

Question

Предполагая, что у меня есть обработчик jQuery для определенного class, где у него есть несколько кнопок/тел/секций. Я хочу знать, какая кнопка была нажата последним, отмените любую ранее нажатую кнопку и сделайте ее понятной и для клиента.

Что такое лучший подход, отслеживайте переменную для последней нажатой кнопки, чтобы я мог изменить ее на «unclicked» при нажатии на другой или просто нацелиться на весь класс?

demo

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

Однако сохранение переменной означает добавление условной логики, которая не требуется, если я просто скажу «удалить класс», нажав «со всех кнопок». Что же касается производительности, есть ли способ, который лучше или они относительно эквивалентны?

Answer 1

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

Для этого типа сценария я бы нацелил на классы (быстрый селектор). Исключить текущий элемент из очистки классов и переключить цель. Это позволяет также включать и выключать.

$(function() { 
    $('.button').on('click', function() { 
     $('.button').not(this).removeClass('clicked'); 
     $(this).toggleClass('clicked'); 
    }); 
}); 

JSFiddle:http://jsfiddle.net/ou1wy5vt/2/

Вы не будете заботиться о каких-либо различий скорости, пока вы не нажмете 50000 раз в секунду, но если вы хотите быстрый селектор, без кэширования его, это немного быстро как это будет иметь меньше результатов:

$('.clicked').not(this).removeClass('clicked'); 

или кэшировать селектор JQuery:

$(function() { 
    var $buttons = $('.button').on('click', function() { 
     $buttons.not(this).removeClass('clicked'); 
     $(this).toggleClass('clicked'); 
    }); 
}); 

Опять же, вам нужен простейший, самый простой способ чтения/обслуживания, а не пытаться быть слишком умным/быстрым и потерять ремонтопригодность.

Answer 2

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

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

Было бы еще быстрее, если вы сохранили элемент обертку JQuery:

var $clicked = $(); 
$('.button').on('click', function() { 
    $clicked.removeClass('clicked'); 
    $clicked = $(this).addClass('clicked'); 
});