简体   繁体   中英

How can I use this here with selector

<style>
    .disNone{display:none;}
    .disBlock{display:block;}
</style>

<script>
    $(".visitlink.item span").click(function(){
        $(".summary.item").toggleClass("disNone");
        $(".fullsum.item").toggleClass("disBlock");  
    });
</script>

<div class="wrapper">
    <div class="coursebox">
        <div class="summary item">summary</div>
        <div class="fullsum item">fullsum</div>
        <div class="visitlink item"><span>Readmore</span></div>
    </div>
    <div class="coursebox">
        <div class="summary item">summary</div>
        <div class="fullsum item">fullsum</div>
        <div class="visitlink item"><span>Readmore</span></div>
    </div>
</div>

How can I apply class on click div it is working on both div how can I write the code to target this.

Working Demo

 $(".visitlink.item span").click(function() { $(this).closest(".coursebox").find(".summary.item").toggleClass("disNone"); $(this).closest(".coursebox").find(".fullsum.item").toggleClass("disBlock"); }); 
 .disNone { display: none; } .disBlock { display: block; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <div class="coursebox"> <div class="summary item">summary</div> <div class="fullsum item">fullsum</div> <div class="visitlink item"><span>Readmore</span> </div> </div> <div class="coursebox"> <div class="summary item">summary</div> <div class="fullsum item">fullsum</div> <div class="visitlink item"><span>Readmore</span> </div> </div> </div> 

You can change to

 $(this).parent().siblings(".summary.item").toggleClass("disNone");
 $(this).parent().siblings(".fullSum.item").toggleClass("disBlock");

As the clicked element is span element and the target elements are the siblings of it's parent div.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM