We Keep Coding

How do i toggle between multiple classes for multiple elements in jQuery?

So I'm trying to implement a set of functions on my website with multiple div objects in it, so that when I click on Div A, it sets the text color of the page to red through Class A, and when i click on Div B, it sets the text to green through Class B, and so on and so forth.
My issue is that the other classes don't unset when clicking multiple objects and one class overrides the others, so the color of the text won't switch anymore.
I've been looking for solutions and trying to use addClass() and removeClass(), but it doesn't work for some reason. Here is a snippet of my code here
$(function() {
$('.one').click(function() {
$("h1").addClass('onetxt');
$("h1").removeClass('twotxt, threetxt');
});
});
$(function() {
$('.two').click(function() {
$("h1").addClass('twotxt');
$("h1").removeClass('onetxt, threetxt');
});
});
$(function() {
$('.three').click(function() {
$("h1").addClass('threetxt');
$("h1").removeClass('onetxt, twotxt');
});
});
h1 {
text-align: center;
}
div {
height: 65px;
width: 65px;
margin: 20px auto;
border-style: solid;
}
/*style info, ignore above here*/
.one {
background-color: red;
}
.onetxt {
color: red;
}
.two {
background-color: green;
}
.twotxt {
color: green;
}
.three {
background-color: blue;
}
.threetxt {
color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Sample Text</h1>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
Any help on this would be greatly appreciated, and if you need more info, ask me in the replies, thank you!
EDIT: Here's a JSFiddle link demonstrating the code that i currently have, my intention is for all three of the DIV elements to change the top text's color when selected in any order, with using the classes if possible.

It seems like the main issue is that removeClass doesn't support multiple class selectors (like 'onetxt, twotxt'). Also you aren't removing all possible classes depending on the order of clicks.
Here's a solution that might work. I've written some helper functions which hopefully clarify what's going on.
const targets = 'h1, p'
const classmap = {
one: 'onetxt',
two: 'twotxt',
three: 'threetxt'
}
const allclasses = Object.values(classmap);
function clearSelection() {
allclasses.forEach(function(clz) { $(targets).removeClass(clz) });
}
function addSelection(sel) {
$(targets).addClass(classmap[sel]);
}
$(function() {
$('.one').click(function(){
clearSelection();
addSelection('one')
});
});
$(function() {
$('.two').click(function(){
clearSelection();
addSelection('two')
});
});
$(function() {
$('.three').click(function(){
clearSelection();
addSelection('three')
});
});

Here's a vanilla DOM API solution based on classList.toggle(className: string, force: boolean). The second parameter controls whether toggle works as remove or add.
const classes = ['one', 'two', 'three'];
classes.forEach(clazz => {
document.querySelector(`.${clazz}`).addEventListener('click', () => {
classes.forEach(cl => document.querySelector('h1').classList.toggle(`${cl}txt`, cl === clazz));
})
})
h1 {
text-align: center;
}
div {
height: 35px;
width: 35px;
margin: 5px auto;
border-style: solid;
}
/*style info, ignore above here*/
.one {
background-color: red;
}
.onetxt {
color: red;
}
.two {
background-color: green;
}
.twotxt {
color: green;
}
.three {
background-color: blue;
}
.threetxt {
color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Sample Text</h1>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

There is no .removeClass() overload supports multiple argument, it only remove the first class. .removeClass() with no argument remove all the classes. This maybe the one you need.
I tweak your code a little bit, including:
Rename some class name. .color-palette is the container of all color selection. .color is individual color choice box.
Add data-color-name attribute to .color. The attribute will be used for sample-text css class assignment.
Simplify the click event with a single, event-delegate handler. I try to decouple the add/remove class logic with the actual color name. This way if you have more color boxes to add, you do not need to copy a new set of function.
Define custom css property. E.g. (--color-1, --color-2). The same property is used for color box background and sample text font color. You don’t have to maintain colors in two different place.
$('.color-palette').on('click', '.color', function(e) {
$("#sample-text").removeClass().addClass($(e.currentTarget).data('color-name'));
});
/* maintain the color choices here */
:root {
--color-1: red;
--color-2: green;
--color-3: blue;
}
h1 {
text-align: center;
}
.color {
height: 65px;
width: 65px;
margin: 20px auto;
border-style: solid;
}
/* style info, ignore above here */
/* color palette style */
.color.color-1 {
background-color: var(--color-1);
}
.color.color-2 {
background-color: var(--color-2);
}
.color.color-3 {
background-color: var(--color-3);
}
/* sample text style */
#sample-text.color-1 {
color: var(--color-1);
}
#sample-text.color-2 {
color: var(--color-2);
}
#sample-text.color-3 {
color: var(--color-3);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id="sample-text">Sample Text</h1>
<div class="color-palette">
<div class="color color-1" data-color-name="color-1"></div>
<div class="color color-2" data-color-name="color-2"></div>
<div class="color color-3" data-color-name="color-3"></div>
</div>

Want less repetition when using javascript to change styles onclick

This code currently works, and when each div is clicked the background color and font size will change. In addition, the formatting for one of the other two divs which was already clicked will be removed. The problem is that this will end up requiring a lot of code, what I imagine is far more than is needed. I'm wondering how to repeat less. It is not such a big deal in this example, with only three divs, but my actual project will need many, many more.
I tried including multiple divs, so it would look like this;
document.querySelector(".div2, .div1").classList.remove("styles");
but that did not seem to work.
const div1 = document.querySelector(".div1");
const div2 = document.querySelector(".div2");
const div3 = document.querySelector(".div3");
function makeBigDiv1 () {
document.querySelector(".div1").classList.add("styles");
document.querySelector(".div2").classList.remove("styles");
document.querySelector(".div3").classList.remove("styles");
}
div1.addEventListener("click", makeBigDiv1);
function makeBigDiv2 () {
document.querySelector(".div2").classList.add("styles");
document.querySelector(".div1").classList.remove("styles");
document.querySelector(".div3").classList.remove("styles");
}
div2.addEventListener("click", makeBigDiv2);
function makeBigDiv3 () {
document.querySelector(".div3").classList.add("styles");
document.querySelector(".div1").classList.remove("styles");
document.querySelector(".div2").classList.remove("styles");
}
div3.addEventListener("click", makeBigDiv3);
.div1 {
width:500px;
height:100px;
border: 2px solid black;
}
.div2 {
width:500px;
height:100px;
border: 2px solid black;
}
.div3 {
width:500px;
height:100px;
border: 2px solid black;
}
.styles {
font-size: 50px;
background-color: grey;
}
<div class="div1">One</div>
<div class="div2">Two</div>
<div class="div3">Three</div>
Well as I mentioned the code works, but would just become prohibitively verbose I feel if applied to a large project. I'm relatively new to this and want to write DRY - don't repeat yourself - code. Thanks!

If you want the three divs to have the shared style, you can style them all at once. You can also make a lot of your click functionality reusable. This is what I would do:
const elements = document.querySelectorAll("div")
function attachClickHandler(className) {
return () => {
document.querySelector(`.${className}`).classList.add('styles');
document.querySelectorAll(`div:not(.${className})`).forEach(element => { element.classList.remove('styles') });
}
}
elements.forEach(element => {
element.addEventListener("click", attachClickHandler(element.className))
})
<html>
<head>
<style>
.div1, .div2, .div3 {
width:500px;
height:100px;
border: 2px solid black;
}
.styles {
font-size: 50px;
background-color: grey;
}
</style>
</head>
<body>
<div class="div1">One</div>
<div class="div2">Two</div>
<div class="div3">Three</div>
<script>
</script>
</body>
</html>
In context you would probably not want to add event listeners to every div so you could just add a class to all divs you want to make selectable and find all by class name instead of find all of type div. This would also allow you to add the base styling for the shared class instead of to all 3 divs.

You can do this quite easily just by looping thru the divs. here is an example. There is some optimization you can do but you get the idea
const div = document.querySelectorAll('.div');
for (var i = 0; i < div.length; i++) {
div[i].addEventListener('click', function(event) {
for (var j = 0; j < div.length; j++) {
// remove styles class from all the div classes
div[j].classList.remove("styles");
}
// add styles class only to the clicked item
this.classList.add("styles");
});
}
.styles {
font-size: 50px;
background-color: grey;
}
<div class="div">One</div>
<div class="div">Two</div>
<div class="div">Three</div>
this.classList.add("styles"); The this refers to the clicked item

Here are some changes:
Use the same className for each block, and give it a specific name (i.e. box).
Same for the added className, make it clear. (i.e. is-selected).
Don't duplicate functions for the same action and use forEach instead to loop through each box.
// Get all boxes
const boxes = document.querySelectorAll('.box');
// For each box
[...boxes].forEach(box => {
// Attach an event click listener
box.addEventListener('click', () => {
// Add the `is-selected` className to the clicked one
box.classList.add('is-selected');
// Remove the `is-selected` className to all the others
[...boxes].filter(el => el !== box).forEach(box => {
box.classList.remove('is-selected');
})
});
});
.box {
width: 500px;
height: 100px;
border: 2px solid black;
}
.box.is-selected {
font-size: 50px;
background-color: grey;
}
<div class="box">One</div>
<div class="box">Two</div>
<div class="box">Three</div>

Toggle only one div element at same position (hide all other div)

I’m new to jQuery and struggling with the .toggle() function.
I want to display several <div>-elements in the same position…but only one at the time. If one <div> is opened and a different one is “toggled” it should automatically be closed.
HTML:
$(document).ready(function() {
$("#button1").click(function() {
$("#box1").toggle(1000);
});
});
$(document).ready(function() {
$("#button2").click(function() {
$("#box2").toggle(1000);
});
});
.container {
width: 90px;
}
.box1 {
background-color: green;
color: red;
display: none;
}
.box2 {
background-color: blue;
color: yellow;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class=box1 id=box1>
This is Box 1
</div>
<div class=box2 id=box2>
This is Box 2
</div>
</div>
Box1
Box2
Also, I am pretty sure that I only need one toggle() function and not 4 for the task I am trying to achieve…but trying to call on the same one does not seem to work with my different id/class.
What am I doing wrong/missing here?

Generally, you can use a single document ready function.
In this case, you could also use a single click function to handle your toggles. Since you're using trigger links, you'll need a way to reference the target box, but something like this would work with an additional attribute to get the box name. (You could do it with indexes as well, but for ease of use, I've added a target-box attribute that has the ID of the desired box.)
I've also added the same box class to both divs, you could remove the individual box1/box2 classes since you have IDs that handle differences already.
I've also added a toggle class to the links to give them a more semantic selector and removed the unnecessary 'open/close' duplicates (since toggle is designed to handle both)
jQuery(document).ready(function($){
$('.toggle').on('click', function(){
var targetBox = $(this).attr('target-box'); // Find the target box
$('.box').not(targetBox).hide(1000); // Hide all other boxes
$(targetBox).toggle(1000); // Toggle the current state of this one
});
});
.container {
width: 90px;
}
.box1 {
background-color: green;
color: red;
display: none;
}
.box2 {
background-color: blue;
color: yellow;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="box box1" id="box1">
This is Box 1
</div>
<div class="box box2" id="box2">
This is Box 2
</div>
</div>
Toggle Box1
Toggle Box2

Something like this may do the trick for you. You can hide all elements marked in some way, e.g. all elements of a class. In this snippet I added the class "box" to all boxes, and on open, I first hide all boxes in this way, before showing the specified box.
Now clicking open will open the specified box and close any others, and clicking close will close the specified box.
$(document).ready(function() {
$("#button1").click(function() {
$(".box").hide(1000);
$("#box1").show(1000);
});
$("#buttonclose").click(function() {
$("#box1").hide(1000);
});
$("#button2").click(function() {
$(".box").hide(1000);
$("#box2").show(1000);
});
$("#buttonclose2").click(function() {
$("#box2").hide(1000);
});
});
.container {
width: 90px;
}
.box1 {
background-color: green;
color: red;
display: none;
}
.box2 {
background-color: blue;
color: yellow;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="box box1" id=box1>
This is Box 1
</div>
<div class="box box2" id=box2>
This is Box 2
</div>
</div>
Close Box1
Close Box2
Open Box1
Open Box2

Using jQuery on the select class not all the divs with the same class

Not really sure how to phrase that in the title. Anyways, what I'm saying is that I have three divs with the same class name. I want to add a mouseover function that only works on the select div, not all of them at once. For example :(https://jsfiddle.net/1y2jw2y0/) this makes all the divs show/hide, I only want the selected one to act on the jQuery function.
Html:
<div class="box">
<p class="show">Show</p>
<p class="hide">hide</p>
</div>
<div class="box">
<p class="show">Show</p>
<p class="hide">hide</p>
</div>
<div class="box">
<p class="show">Show</p>
<p class="hide">hide</p>
</div>
Css:
.box {
display: inline-block;
width: 150px;
height: 150px;
border: 1px solid #000;
}
.hide {
display: none;
}
jQuery:
$(document).ready(function() {
$('.box').mouseover(function() {
$('.hide').show();
$('.show').hide();
});
$('.box').mouseleave(function() {
$('.hide').hide();
$('.show').show();
});
});

Use this to target the "selected" element, then select the child with find() or children():
$(document).ready(function() {
$('.box').mouseover(function() {
$(this).children('.hide').show();
$(this).children('.show').hide();
});
$('.box').mouseleave(function() {
$(this).children('.hide').hide();
$(this).children('.show').show();
});
});
JSFiddle Demo
Edited, to outline the performance issues brought up:
For basic details about the difference between find and children, this answer is a good resource.
In this case, I found .find() to be faster as a whole, usually ~.2ms.
After extensive testing, It appears there is very little, or no difference between using find(), or using $('.selector', this)
Overall, the results were similar. In some cases, it appears $('.selector', this) is slower, in others find().
However, find does give you extra functionality that cannot be achieved with $('.selector', this), such as a direct child selector: .selector > .anotherone, or caching the jQuery object to save resources.
Summary: There isn't much difference, it all depends on your case, and what you prefer.

You can do it all in CSS:
.box:hover .hide {
display: block;
}
.box:hover .show {
display: none;
}
Example: http://jsfiddle.net/Zy2Ny/
If you really want to do it in JavaScript, simply use $(this) and find():
More information about whether children() or find() is faster.
$(".box").mouseover(function() {
$(this).find(".hide").show();
$(this).find(".show").hide();
});
$(".box").mouseleave(function() {
$(this).find(".hide").hide();
$(this).find(".show").show();
});
.box {
display: inline-block;
width: 150px;
height: 150px;
border: 1px solid #000;
}
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="boxes">
<div class="box">
<p class="show">Show</p>
<p class="hide">Hide</p>
</div>
<div class="box">
<p class="show">Show</p>
<p class="hide">Hide</p>
</div>
<div class="box">
<p class="show">Show</p>
<p class="hide">Hide</p>
</div>
</div>
Example: https://jsfiddle.net/1y2jw2y0/5/

Add a 'this' along with the selector,
$(document).ready(function() {
$('.box').mouseover(function() {
$('.hide', this).show();
$('.show', this).hide();
});
$('.box').mouseleave(function() {
$('.hide', this).hide();
$('.show', this).show();
});
});
Example: https://jsfiddle.net/1y2jw2y0/6/
So basically you have to select the child selector of the mouse hovered element instead.
NOTE:- You can do this using find() & children() jquery API's as well. But it's bit slower than selecting directly.
And why not doing with pure css? See the example below,
.box {
display: inline-block;
width: 150px;
height: 150px;
border: 1px solid #000;
}
.hide,
.box:hover > .show {
display: none;
}
.box:hover > .hide {
display: block;
}
Example: https://jsfiddle.net/1y2jw2y0/3/

Change your syntax to
$('.box').mouseover(function() {
$(this).find('.hide').show();
$(this).find('.show').hide();
});
Just navigate from the current element which trigerred the event to its child elements using $(this)

The problem is that your selector is targeting all of the divs with that class name in the document. You need to limit the scope to just the divs inside of the box you care about. One way to do this would be
$(this).find('.hide').show()
Instead of
$(".hide").show();
See here https://jsfiddle.net/1y2jw2y0/1/

You can see: $('.box') select all .box div.
So that $('.hide') select all .hide p => when you click on a box, all .hide p are affected.
You can fix as following code:
$(this).select('.hide').hide()
$(this).select('.show').show()

jQuery 'on' click not checking for updated selector?

I'm creating a simple button (sort of) for a user to iterate through a number of selections when clicking "up" or "down".
I'm using jQuery to check after each click that there are more things up (or down) and updating the classes / styles / selections accordingly. However if I change the class of the element that is triggering the "on" function, it is still triggering (on click) even though all the classes specified in the selector are not there (in the DOM) any more.
In this simplified example if you click the "i.up.enabled" element then it's class switches ".up.disabled" and the visible field changes. Fine so far. However, if you click it again then it updates again, which it shouldn't(?) as the selector used to call the 'on' function is "i.up.enabled" and not "i.up.disabled". It's reasonably simple to work round this but I wondered why this is?
Does "on" read from the source rather than the DOM & is there a more accepted way doing this?
HTML
<div class="wrapper">
<div data-state="1">Number 1</div>
<div data-state="0">Number 2</div>
<i class="up enabled">up</i>
</div>
CSS
i {
cursor: pointer;
}
div[data-state="0"] {
display: none;
padding: 0 2rem;
border: 1px solid gray;
}
div[data-state="1"] {
padding: 0 2rem;
border: 1px solid gray;
}
.wrapper > * {
display: inline-block;
font-size: 90%;
}
i.disabled {
color: gray;
cursor: default;
}
i.enabled {
color: blue;
cursor: pointer;
}
JavaScript / jQuery
$('.wrapper i.enabled.up').on('click', function(){
var $current = $(this).siblings('div[data-state="1"]');
var $next = $(this).siblings('div[data-state="0"]');
$current.attr('data-state', 0)
$(this).addClass('disabled').removeClass('enabled');
$next.attr('data-state', 1);
});
And the fiddle is here
N.B. I appreciate that .data() is better for manipulating data-* elements, but due to restrictions I have to use attr("data-*", [value])

Currently what you are using is called a "direct" binding which will only attach to element that exist on the page at the time your code makes the event binding call.
Its does't matter even if selector is modified, Event will still be attached with these elements when using "direct" binding.
You need to use Event Delegation using .on() delegated-events approach, when generating elements dynamically or manipulation selector (like removing and adding classes).
General Syntax
$(staticParentElement).on('event','selector',callback_function)
Example
$('.wrapper').on('click', 'i.enabled.up', function(){
});
DEMO

You can remove the event inside the on function using $(this).off("click");:
$('.wrapper i.enabled.up').on('click', function(e) {
var $current = $(this).siblings('div[data-state="1"]');
var $next = $(this).siblings('div[data-state="0"]');
$current.attr('data-state', 0)
$(this).addClass('disabled').removeClass('enabled');
$next.attr('data-state', 1);
$(this).off("click");
});
i {
cursor: pointer;
}
div[data-state="0"] {
display: none;
padding: 0 2rem;
border: 1px solid gray;
}
div[data-state="1"] {
padding: 0 2rem;
border: 1px solid gray;
}
.wrapper > * {
display: inline-block;
font-size: 90%;
}
i.disabled {
color: gray;
cursor: default;
}
i.enabled {
color: blue;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div data-state="1">Number 1</div>
<div data-state="0">Number 2</div>
<i class="up enabled">up</i>
</div>