How does jq realize that the current element is clicked to hide other elements at the same level

<span id="jianjie addClass"></span>
<span id="lishi"></span>
<span id="rongyu"></span>


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

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

})   
</script>

it"s too cumbersome to write that

Javascript css html
Mar.15,2021 
<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>

siblings ()

    In the event callback of
  1. jQ, $(this) is event.target , that is, the DOM object that triggers the event
  2. take a look at the "traversal" category of 
    <script type="text/javascript">
$(function(){
    $("-sharplishi").click(function(){
        $(this).addClass("animate").siblings().removeClass("animate");
    });

    $("-sharprongyu").click(function(){
        $(this).addClass("animate").siblings().removeClass("animate");
    });

})   
</script>

    it is suggested that nodes can be stored in a variable before use, and it is not efficient to find nodes repeatedly. To put it simply, the principle is that the this is currently hidden, and then traverse the sibling nodes to achieve the effect.

    Baidu knows

    by clicking "event delegate".

    you can use slblings () to select sibling nodes. Portal-go to JSRUN to see the effect 

    <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>

Previous: The problem of full discount on shopping carts

Next: How to prevent the last line from appearing?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu