jq如何实现当前元素被点击隐藏同层级其他元素

Question

<span id="jianjie addClass">简介</span>
<span id="lishi">历史</span>
<span id="rongyu">荣誉</span>


<script type="text/javascript">
$(function(){
    $("#lishi").click(function(){
        $(".lishi").addClass("animate");
        $(".jianjie").removeClass("animate");
    });

    $("#rongyu").click(function(){
        $(".rongyu").addClass("animate");
        $(".lishi").removeClass("animate");
    });

})   
</script>

这么写太繁琐了

Answer 1

<span id="jianjie addClass" class="list">简介</span>
<span id="lishi" class="list">历史</span>
<span id="rongyu" class="list">荣誉</span>
<script type="text/javascript">
$(function(){
    $(".list").click(function(){
        $(this).addClass("animate").siblings().removeClass("animate");
    });

})   
</script>

Answer 2

siblings()

Answer 3

1. jQ的事件回调里，$(this)就是event.target，即触发事件的DOM对象
2. 看下这里边的“遍历”分类，挨个儿都看一遍，你大概就该知道用什么了。

Answer 4

<script type="text/javascript">
$(function(){
    $("#lishi").click(function(){
        $(this).addClass("animate").siblings().removeClass("animate");
    });

    $("#rongyu").click(function(){
        $(this).addClass("animate").siblings().removeClass("animate");
    });

})   
</script>

Answer 5

建议可以把节点存储到一个变量中再使用，重复查找节点效率不高。简单来说，原理就是 this当前的隐藏，然后遍历兄弟节点实现效果。

Answer 6

百度一下“事件委托”就知道了

Answer 7

可以使用slblings()来选择兄弟节点。传送门-去JSRUN看看效果

<span id="jianjie" class="item">简介</span>
<span id="lishi" class="item">历史</span>
<span id="rongyu" class="item">荣誉</span>
<script type="text/javascript">
$(function(){
    $(".item").off().on('click',function(){
        $(this).addClass("animate").siblings().removeClass('animate')
    });
})   
</script>