Reputation: 168
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>
Upvotes: 1
Views: 978
Reputation: 13222
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>
Upvotes: 2
Reputation: 5869
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>
Upvotes: 2
Reputation: 337743
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.
Upvotes: 1