Кажется, я не могу найти именно эту проблему на SE. У меня есть ряд ссылок в списке. При щелчке ссылки добавляется активный класс. Если нажата другая ссылка, я хочу, чтобы она активировалась, а предыдущая активная ссылка неактивна.
<li>
<div class="yearaction year1">
<a href="#" class="gotoslide inactiveyear" id="year1"></a>
</div>
2007
</li>
<li>
<div class="yearaction year2">
<a href="#" class="gotoslide inactiveyear" id="year2"></a>
</div>
2008
</li>
<li>
<div class="yearaction year3">
<a href="#" class="gotoslide inactiveyear" id="year3"></a>
</div>
2009
</li>
.
.
.
$(".gotoslide").click(function(){
$(this).toggleClass("activeyear inactiveyear");
});
Эта реализация не влияет на другие ссылки. Как я могу правильно работать с этим переключателем?
Ты почти там. Это приведет к переключению классов по ссылке, на которую вы нажимаете. Чтобы также переключить их на тот, на который вы ранее нажали:
$(".gotoslide").click(function(){
// previously active
$(".activeyear").toggleClass("activeyear inactiveyear");
$(this).toggleClass("activeyear inactiveyear");
});
$(".activeyear").add(this).toggleClass("activeyear inactiveyear");
click
будут отправлены одному и тому же элементу.
Вы должны переключать его индивидуально. Хорошим обходным путем является подключение data- * к каждой ссылке.
<a href="#" class="gotoslide inactiveyear" id="year1" data-year="1"></a>
<a href="#" class="gotoslide inactiveyear" id="year2" data-year="2"></a>
затем
$(".gotoslide").click(function(){
$(this).toggleClass("activeyear inactiveyear");
var year = parseInt($(this).data('year')) - 1;
$('#year' + year).toggleClass("activeyear inactiveyear");
});
Это не влияет на другие ссылки, потому что, используя:
$(this)
вы ссылаетесь только на этот конкретный экземпляр класса.gotoslide (тот, который был нажат).
Чтобы затронуть все остальные элементы классом.gotoslide, обратитесь к ним с помощью:
$('.gotoclass')
Вы можете попробовать это, просто переключите один класс (активный) с использованием метода.toggleClass(). Таким образом, вы можете предположить, что неактивное состояние не имеет класса активных и использует CSS для их стиля соответственно. Это проверит другой активный элемент, если он есть, удаляет активный класс и делает его активным.
$(document).on('click','.gotoslide', function (e) {
if($('.gotoslide.active').length) {
$('.gotoslide.active').removeClass('active');
}
$(this).toggleClass('active');
});
Вы должны сначала очистить другие ссылки, а затем установить ссылку с кликом в правильный класс.
Вместо того, чтобы переключать классы, более безопасный способ сделать это задает классы явно для того, что они должны быть с removeClass и добавить класс. Сначала установите все элементы $ ('. ActiveYear') (предположительно только один) на неактивный, а затем установите ссылку на ссылку 'inactiveyear'
$(".gotoslide").click(function(e){
e.preventDefault();
$(".activeyear").removeClass("activeyear").addClass("inactiveyear");
$(this).toggleClass("activeyear inactiveyear");
});
Рабочий пример: http://jsfiddle.net/hVLML/4/
Это немного зависит от того, что должно произойти, когда вы дважды нажимаете одну и ту же цель и как вы настроили эти классы. Я думаю, что эта линия мышления может помочь вам:
$(".gotoslide").click(function () {
$(".gotoslide").removeClass("activeyear"); // removes .activeyear from all items
$(this).addClass("activeyear"); // add .activeyear to this specific item
});
$(this).toggleClass("activeyear").toggleClass("inactiveyear");
,