toggleClass removes all other existing classes

Question

My goal is to add/replace new classes to body, dynamically provided by the "id" variable below. That variable's value is the actual id of each section that passes into the viewport on scroll. So as different sections (obviously with different ids) pass through the viewport, they pass their id name to the body as a new class, adding a new or replacing the previous class. Using toggleClass with the boolean true, it works, but it's also replacing all of the other classes on the body tag, given inherently by the Wordpress template, which of course is breaking everything else. Make sense? Any insights would be helpful.

var id = entry.target.getAttribute('id');

var newClass = $('body').toggleClass(id, true);

Thanks. The goal is to have the class be dynamically replaced by the value of the id variable (the id name) so I can apply different styles to the body. The context is that I'm using an Intersection Observer to determine when sections of the page (with different ids) enter the viewport, pass the id name to the body tag as a class when they do and then replace the new body class with another when another section enters the viewport. — pjldesign, Feb 14 '21 at 06:50
so is `id` giving you correct value ? what doesn't work here ? — Swati, Feb 14 '21 at 06:55
Everything is working except `toggleClass` is removing all the other classes attached to the `body` tag by Wordpress and replacing all of them with my desired classes (provided by the id variable). — pjldesign, Feb 14 '21 at 07:01
its not clear, you want. with the command `$('body').toggleClass(id, true);`you add your class in all tags in body. if you dont want this, you have to give the rule which avoid to add the class for the tags desired.. and when you say: `It's working but also removing all the other 50+ classes attached` its not right, the command dont remove the classes already included before the command; it add the new class.(swith `true`) — Frenchy, Feb 14 '21 at 08:25

score 0 · Answer 1 · answered Feb 14 '21 at 06:30

0

You just have to pass the class name you want to toggle only

$('div').toggleClass('c3');

.c1 {
  font-size: 5rem;
}

.c3 {
  color: red;
}

.c2 {
  padding: 2rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="c1 c2 c3">TEST</div>

answered Feb 14 '21 at 06:30

hgb123

13,869
3
20
38

Thanks but the class name is dynamically generated by the variable "id". I should've been more explicit. – pjldesign Feb 14 '21 at 06:35
@pjldesign you should add an example for that – hgb123 Feb 14 '21 at 06:36

Frenchy · Answer 2 · 2021-02-14T08:24:12.560

If you want to select (i dont know your rules) what part of your body have to add the class desired: you could enumerate all tags of your body like this:

console.log("there are " + $('body *').length + " tags in the body");
  

$('body *').each(function(){
  // here its an example of data you could access
  // you could test following your condition and modify or not the class corresponding
  console.log("tag: " + $(this).prop("tagName"));//display the tag
  console.log("class: " + $(this).attr("class")); //display the class or undefined
  console.log("content: " + $(this).html());      //display the content of tag
});

toggleClass removes all other existing classes

2 Answers2