Toggle class except on the current clicked element
Question
I am using the toggleClass() function to add a class to remaining .members-section div elements. It's working fine but the class is being added to the currently clicked div also. How can I apply the class to elements except the clicked on in jQuery?
$(document).ready(function($) { $('#as-member').click(function(e) { $('.members-section').toggleClass('unselected'); }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="members-section" id="as-member"> <img src="img/test1.jpg" alt=""> <span>Join as a new member</span> </div> <div class="members-section" id="as-student"> <img src="img/test2.jpg" alt=""> <span>Join as a student</span> </div> <div class="members-section"> <img src="img/test3,jpg" alt=""> <span>Upgrade my membership</span> </div> <div class="members-section test-members" > <h5>Teest...</h5> <ul class="member-options"> <li><span>Discounts</span></li> <li><span>Institute access</span></li> <li><span>Library access</span></li> <li><span>Market events</span></li> </ul> </div>
3 answers
solution1
2 ACCPTED 2019-03-22 08:51:07
You can use not(this) for that. It filters out the currently clicked element out of the jQuery selection.
$(document).ready(function($) { $('#as-member, #as-student').click(function(e) { $(this).removeClass('unselected').siblings().addClass('unselected'); }); });
.unselected { color: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="members-section " id="as-member"><img src="img/test1.jpg" alt=""> <span>Join as a new member</span> </div> <div class="members-section " id="as-student"><img src="img/test2.jpg" alt=""> <span>Join as a student</span> </div> <div class="members-section "><img src="img/test3,jpg" alt=""> <span>Upgrade my membership</span> </div> <div class="members-section"> <h5>Teest...</h5> <ul class="member-options"> <li><span>Discounts</span></li> <li><span>Institute access</span></li> <li><span>Library access</span></li> <li><span>Market events</span></li> </ul> </div>
solution2
2 2019-03-22 08:52:08
use .not($(this)) to achieve
$('.members-section').not($(this)).toggleClass('unselected');
.unselected{ background-color:#0f0; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html> <head> </head> <body> <div class="members-section " id="as-member"> <img src="img/test1.jpg" alt=""> <span>Join as a new member</span> </div> <div class="members-section " id="as-student"> <img src="img/test2.jpg" alt=""> <span>Join as a student</span> </div> <div class="members-section " id="as-test"> <img src="img/test3,jpg" alt=""> <span>Upgrade my membership</span> </div> <div class="members-section" id="as-four"> <h5> Teest...</h5> <ul class="member-options"> <li><span>Discounts</span></li> <li><span>Institute access</span></li> <li><span>Library access</span></li> <li><span>Market events</span></li> </ul> </div> <script> $(document).ready(function ($) { $(document).ready(function ($) { $('#as-member').click(function (e) { if ($(this).hasClass('active-div')) { $('.members-section').removeClass('unselected active-div'); } else { $('.members-section').removeClass('unselected'); $(this).removeClass('unselected').addClass('active-div').siblings().addClass('unselected').removeClass('active-div'); $('#as-four').removeClass('unselected'); } }); $('#as-student').click(function (e) { if ($(this).hasClass('active-div')) { $('.members-section').removeClass('unselected active-div'); } else { $('.members-section').removeClass('unselected'); $(this).removeClass('unselected').addClass('active-div').siblings().addClass('unselected').removeClass('active-div'); $('#as-four').removeClass('unselected'); } }); $('#as-test').click(function (e) { if ($(this).hasClass('active-div')) { $('.members-section').removeClass('unselected active-div'); } else { $('.members-section').removeClass('unselected'); $(this).removeClass('unselected').addClass('active-div').siblings().addClass('unselected').removeClass('active-div'); $('#as-four').removeClass('unselected'); } }); }); }); </script> </body> </html>
solution3
1 2019-03-22 08:50:09
To make this work you can use not() to exclude the .members-section which was clicked:
$(document).ready(function($) { var $sections = $('.members-section').click(function(e) { $sections.not(this).toggleClass('unselected'); }); });
.members-section { color: #000; } .members-section.unselected { color: #CCC; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="members-section" id="as-member"> <img src="img/test1.jpg" alt=""> <span>Join as a new member</span> </div> <div class="members-section" id="as-student"> <img src="img/test2.jpg" alt=""> <span>Join as a student</span> </div> <div class="members-section"> <img src="img/test3,jpg" alt=""> <span>Upgrade my membership</span> </div> <div class="members-section"> <h5>Teest...</h5> <ul class="member-options"> <li><span>Discounts</span></li> <li><span>Institute access</span></li> <li><span>Library access</span></li> <li><span>Market events</span></li> </ul> </div>
Also note the use of toggleClass() means the UI gets a little out of sync on successive clicks. I'd suggest amending the logic if you need that behaviour.
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.
Related Question
How to toggle every jQuery element except the clicked?
Toggle class except if a child is clicked in React
Toggle Class when element is clicked
toggle class for the clicked element queryselectorAll
JavaScript toggle class on current element
Remove Class when current toggle is clicked
Toggle all elements except the sub element of clicked one
Toggle a CSS class on clicked element in AngularJS?
toggle class of multiple elements based on clicked element
How to toggle class to child only of current clicked class
Related Tags