我想更改列表中的所有元素,但单击的元素除外。我想我需要确定实际点击了什么,然后改变它的兄弟姐妹?如何找到点击了哪个元素?
<ul>
<li><h4 class="span1"><a href="#" class="sort" data-sort="ID">ID<i class="icon-arrow-down" aria-hidden="true"></i></a></h4></li>
<li><h4 class="span2"><a href="#" class="sort" data-sort="Type">Type<i class="icon-arrow-down" aria-hidden="true"></i></a></h4></li>
<li><h4 class="span3"><a href="#" class="sort" data-sort="Task">Task<i class="icon-arrow-down" aria-hidden="true"></i></a></h4></li>
<li><h4 class="span8"><a href="#" class="sort" data-sort="Project">Project<i class="icon-arrow-down" aria-hidden="true"></i></a></h4></li>
<li><h4 class="span3a"><a href="#" class="sort" data-sort="DueDate">Urgency<i class="icon-arrow-down" aria-hidden="true"></i></a></h4></li>
<li><h4 class="span3 last"><a href="#" class="sort" data-sort="Created">Date Created<i class="icon-arrow-down" aria-hidden="true"></i></a></h4></li>
</ul>
$('.sort').click(function () {
$(this).data('clicked', true);
if($(this).data('clicked')) {
$('i', this).toggleClass('icon-arrow-down').toggleClass('icon-arrow-up');
}
else {
$('.sort i').siblings().removeClass('icon-arrow-up').addClass('icon-arrow-down');
}
});
回答:
$('.sort').click(function() {
$(this).closest('li').siblings().find('i').removeClass('icon-arrow-up').addClass('icon-arrow-down');
$(this).find('i').toggleClass('icon-arrow-down icon-arrow-up');
});