Question

我想知道是否有一种方法可以在隔离当前单击的元素的同时更改子元素，到目前为止，我有一个带有click事件处理程序的简单遍历，如下所示：

$(function() {
    $(".hd").children("ul").children().each(function(){
        $(this).click(function(){

            alert('Handler for .click() called');//Test (remove after completion)
        });
    })
});

<!--HTML to manipulate>
    <div class="hd">
                            <h2>Important  Information</h2>
                            <ul>
                                <li><a href="#">Faculty</a></li>
                                <li><a href="#">Staff</a></li>
                                <li><a href="#">Students</a></li>
                            </ul>
                        </div>

我所拥有的是<ul>中的链接，我将其视为标签。我要做的是向当前选定的<li>添加一个类，同时从列表中的所有其他<li>中删除类。我想我可能会颠倒它，即点击处理程序应该先行，遍历应该进入。我的目标如下：

Answer 1

$('.hd > ul > li').click(function(){
   $(this).addClass('myClass').siblings().removeClass('someClass');
});

请注意尼克和我的解决方案之间选择器的区别 - 我只会抓住每个级别的直接孩子，而他将抓住所有ul li后代。

Answer 2

试试这个：

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

Answer 3

像这样：

$('div.hd ul li').click(function() {
    $('div.hd ul li').not(this).hide();
    $(this).show();
});

处理除当前单击的元素之外的所有元素

3 个答案: