This question already has answers here:
toggleClass and remove class from all other elements
(6 answers)
Closed 3 years ago.
I have to remove a class for all elements of each() function.
Right now when I click on a .btn element it adds "selected" class to it, again click on .btn it removes that "selected" class.
But when I click other .btn element it should remove "selected" class from previous .btn elements.
$('.btn').each(function() {
$(this).click(function() {
if ($(this).hasClass("selected")) {
$(this).removeClass("selected");
} else {
$(this).addClass("selected");
}
});
})
.selected { background-color:red }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="lorem" class="btn">Lorem</div>
<div id="ipsum" class="btn">Ipsum</div>
<div id="dolor" class="btn">Doloe</div>
<div id="Set" class="btn">Set</div>
You've over complicated this a little. Firstly you don't need an each() loop as the click() will be applied to a collection of elements if you provide them in the selector. Secondly you can use toggleClass() on the element which is clicked. Then you can use removeClass() on all the other .btn elements to remove the class. Try this:
var $btns = $('.btn').click(function() {
$btns.not(this).removeClass('selected');
$(this).toggleClass("selected");
});
.selected {
color: #C00;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="lorem" class="btn">Lorem</div>
<div id="ipsum" class="btn">Ipsum</div>
<div id="dolor" class="btn">Doloe</div>
<div id="Set" class="btn">Set</div>
You do not need each nor else; toggleClass and remove from siblings will work
$('.btn').on("click",function() {
$(this).toggleClass("selected");
$(this).siblings().removeClass("selected");
})
.selected { background-color:red }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="lorem" class="btn">Lorem</div>
<div id="ipsum" class="btn">Ipsum</div>
<div id="dolor" class="btn">Doloe</div>
<div id="Set" class="btn">Set</div>
To fix your existing code, remove all classes from all buttons in the else:
$('.btn').each(function() {
$(this).click(function() {
if ($(this).hasClass("selected")) {
$(this).removeClass("selected");
} else {
$('.btn').removeClass("selected");
$(this).addClass("selected");
}
});
})
.selected {
background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="lorem" class="btn">Lorem</div>
<div id="ipsum" class="btn">Ipsum</div>
<div id="dolor" class="btn">Doloe</div>
<div id="Set" class="btn">Set</div>
Related
This question already has answers here:
Easiest way to toggle 2 classes in jQuery
(7 answers)
Closed 1 year ago.
suppose there is a div with class "box" on clicking the button with class "button" I want to remove the class "box" from the div and add a absolutely new class "active" to the div. what will be the jQuery code of the following?
html
<div class="box">
<button class="button">button</button>
</div>
and also how should I add the new class in CSS ? like normally we add.
You can use removeClass method to remove class and use addClass method to add class using jquery.
You can also chain method as:
box.removeClass("box").addClass("active");
const box = $(".box");
$(".button").on("click", function() {
box.removeClass("box");
box.addClass("active");
})
.box {
background-color: red;
}
.active {
background-color: yellowgreen;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<button class="button">button</button>
</div>
Perhaps the easiest way is to use the classList.replace method which you can use with both jQuery, and vanilla JS.
jQuery.
$('.button').click(function () {
const parent = this.parentNode;
parent.classList.replace('box', 'active');
});
.active { background: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<button class="button">button</button>
</div>
Vanilla JS.
const button = document.querySelector('button');
button.addEventListener('click', handleClick, false);
function handleClick() {
const parent = this.parentNode;
parent.classList.replace('box', 'active');
}
.active { background: red; }
<div class="box">
<button class="button">button</button>
</div>
The simplest jQuery technique is probably with toggle:
$('.button').click(function() {
$(this).parent().toggleClass('box active');
});
.box {
background: #ddd;
}
.active {
background: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<button class="button">button</button>
</div>
I'm adding active class to the buttons, and also i'm adding list/grid class to the cards-wrapper based on the button clicked.
Below is the working code. is there a way to write less code to achieve the same output?
$('.buttons button').click(function(e) {
e.preventDefault();
$('button').removeClass('active');
$(this).addClass('active');
if ($(this).hasClass('list')) {
$('.cards-wrapper').removeClass('grid').addClass('list');
}
else if($(this).hasClass('grid')) {
$('.cards-wrapper').removeClass('list').addClass('grid');
}
});
<div class="buttons">
<button class="grid">Grid</button>
<button class="list active">List</button>
</div>
<div class="cards-wrapper list">
<div>Sample Content</div>
</div>
You can use the jQuery toggleClass method. As the name suggests, this method toggles the given classes for all the elements in the selection.
You can reduce your if/else logic to just one if statement by checking whether the button that was clicked on is not active. Once you have established that the button is not active, you can then just toggle the classes for both of the buttons and for the content wrapper div.
$('.buttons button').click(function(e) {
e.preventDefault();
if (!$(this).hasClass('active')) {
$('button').toggleClass('active');
$('.cards-wrapper').toggleClass('grid list');
}
});
.active {
color: green;
}
.list {
color: red;
}
.grid {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">
<button>Grid</button>
<button class="active">List</button>
</div>
<div class="cards-wrapper list">
<div>Sample Content</div>
</div>
Using the toggleClass method in this way will break if you add more buttons, though, so take care with it.
There's not much you can do there as you are having two action buttons, if you can make it into a single one, then you can use jQuery's .toggleClass() method here. Hence, you don't have to check for classes using .hasClass() every time.
$('.buttons button').click(function(e) {
//some of your code here
$('.cards-wrapper').toggleClass('grid list');
});
Try using ternary operator not toggleClass() because it will cost bug.
$('.buttons button').click(function(e) {
e.preventDefault();
$('button').removeClass('active');
$(this).addClass('active');
$(this).hasClass('list') ? $('.cards-wrapper').removeClass('grid').addClass('list') : '';
$(this).hasClass('grid') ? $('.cards-wrapper').removeClass('list').addClass('grid') : '';
});
.active{
color:green !important;
}
.list{
color:red;
}
.grid{
color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">
<button class="grid">Grid</button>
<button class="list active">List</button>
</div>
<div class="cards-wrapper list">
<div>Sample Content</div>
</div>
Try with toggleClass() function of jquery
In your answer addClass() and removeClass() .its right.
But better use with toggleClass().because toggle function to check the class name already present or not.if is it present to remove the class name ,is not add the class.
Its handle with one or more function .See the jquery documentation of
toggleClass()
$('.buttons button').click(function(e) {
e.preventDefault();
$('button').toggleClass('active');
if($(this).hasClass('list')){
$('.cards-wrapper').toggleClass('grid list');
}
else if($(this).hasClass('grid')) {
$('.cards-wrapper').toggleClass('list grid');
}
});
.active{
color:green !important;
}
.list{
color:red;
}
.grid{
color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">
<button class="grid">Grid</button>
<button class="list active">List</button>
</div>
<div class="cards-wrapper list">
<div>Sample Content</div>
</div>
I need to change the color of my anchor element from black to white while the enclosing div is clicked.
code:
$(document).ready(function() {
$(".settings-list-container").click(function() {
$(".functionHyperlink").css("background-color", "red");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="settings-container" ng-controller="settingController">
<div id="settings-list">
<div class="settings-list-container" ng-repeat="element in elements" ng-click="openTab(element,$event);" target="_self">
{{element.caption}}
</div>
</div>
<div id="settings-list-content" ng-include="tabV.view">
</div>
</div>
To achieve this you can use toggleClass() to add/remove a pre-defined CSS rule you apply to the .settings-list-container element. This class can then be set to affect the child .functionHyperlink element, something like this:
$(document).ready(function() {
$(".settings-list-container").click(function() {
$(this).toggleClass('active');
});
});
.functionHyperlink {
color: #000;
}
.settings-list-container.active .functionHyperlink {
background-color: #F00;
color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="settings-container" ng-controller="settingController">
<div id="settings-list">
<div class="settings-list-container" ng-repeat="element in elements" ng-click="openTab(element,$event);" target="_self">
{{element.caption}}
</div>
</div>
<div id="settings-list-content" ng-include="tabV.view"></div>
</div>
If you only want the colour to be added once, change toggleClass() to addClass().
A possibility is to use angular.element() and css selector
angular.element('.functionHyperlink').css('color', '#fff');
If I understand you correctly, you only want to achieve the color change while clicking. You could try so with pure CSS like this.
.settings-list-container:active .functionHyperlink {
color: white;
}
Or you could go by jQuery and add a class while clicking the div:
$(document).ready(function() {
"use strict";
$('.settings-list-container').each(function() {
$(this).bind('mousedown', function() {
$(this).find('.functionHyperlink').addClass('inverted');
}).bind('mouseup', function() {
$(this).find('.functionHyperlink').removeClass('inverted');
});
});
});
.functionHyperlink.inverted {
color: white;
}
If you want the element to stay inverted, use the following jQuery instead.
$(document).ready(function() {
"use strict";
$('.settings-list-container').each(function() {
$(this).click(function(e) {
e.preventDefault();
$(this).find('.functionHyperlink').toggleClass('inverted');
});
});
});
I'm trying to change Div class on click. What I'm currently trying to do:
I got this on my divs:
onclick"changeClass()"
and this is my function
function changeClass(){
$("#test123").attr("class", "classname");
}
However it's not working. You should now that I generate many divs with Id test123 with foreach loop so that may be the problem but I'm not really sure
You forgot the =:
onclick="changeClass()"
Also, you need to specify which?
onclick="changeClass(this)"
Then in the code:
function changeClass(which) {
$(which).attr("class", "classname");
}
Instead of all these, since you are using jQuery, you can do it in a simple way:
$(function () {
$("div").click(function () {
this.className = "classname";
});
});
.classname {
background: #ccf;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test1">Test 1</div>
<div id="test2">Test 2</div>
<div id="test3">Test 3</div>
<div id="test4">Test 4</div>
If you want multiple classes, it is always better to add and remove class.
$(function () {
$("div").click(function () {
$(this).addClass("classname");
});
});
.classname {
background: #ccf;
}
.myClass {
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test1">Test 1</div>
<div id="test2" class="myClass">Test 2</div>
<div id="test3">Test 3</div>
<div id="test4" class="myClass">Test 4</div>
This way, it doesn't affect the previous classes.
https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/onclick
onclick
Type: script code
This event handler is called when the object is clicked.
Example
< image src="hello.png" onclick="alert('Hi')"/>
As described on example, it should be written as onclick=foo(args)
changeClass = function(){
document.querySelector("div").setAttribute('class', 'black');
}
.red {
background: red;
}
.black {
background: black;
}
<div class="red" onclick="changeClass()">
lorem
</div>
<br>
<button onclick="changeClass()">click me to change class</button>
I have a scenario where I've multiple div with class navToME on/off. Now what I've trying to do here is if a div has a class off, then remove the class navToMe.
E.g.,
if($('.navToME').hasClass('off')){
$('.off').removeClass('navToME');
}
My HTML structure is like this:
<div class="on navToME">
<strong>ABC</strong>
</div>
<div class="off navToME">
<strong>DEF</strong>
</div>
What's happening right now is it just checks the first div with that class and returns false. Is there a way anyone can suggest so that I could just this for all classes inside my HTML? Thanks in advance!
You can simply use Class Selector to identify element with multiple class then use removeClass()
$('.off.navToME').removeClass('navToME');
$(function() {
$('.off.navToME').removeClass('navToME');
});
.on {
background-color: green;
}
.off {
background-color: red;
}
.navToME {
background-color: grey!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="on navToME">
<strong>ABC</strong>
</div>
<div class="off navToME">
<strong>DEF</strong>
</div>