jQuery/Javascript toggle between a bunch of classes on body tag

Question

I have a bunch of spans in my HTML structure with different ID's and i want to toggle classes on body tag by each of the span ID's
For example if i click on a span with ID_0 I want to toggle class ID_0 on body tag
and if i click on ID_1 then remove the other ones and add the one i clicked

$(".images").click(function(){
      var ids = $(this).attr("id");
      $("body").removeClass("ID_0 ID_1 ID_2 ID_3").addClass(ids);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
  <div class="Container">
    <span class="images" id="ID_0">ID_0</span>
    <span class="images" id="ID_1">ID_1</span>
    <span class="images" id="ID_2">ID_2</span>
    <span class="images" id="ID_3">ID_3</span>
  </div>
</body>
</html>

The spans are auto generated with php and each of the spans have its own ID's there might be +15 spans like that, So im pretty sure you can do way better than my newbie jquery coding :)

Possible duplicate of [JQuery removeClass wildcard](https://stackoverflow.com/questions/2644299/jquery-removeclass-wildcard) — brk, Jun 20 '17 at 06:19

score 3 · Accepted Answer · answered Jun 20 '17 at 06:09

The code below will remove any class that starts with ID_ since this is your "wildcard"

$("body").removeClass(function(index, className) {
    return (className.match(/(^|\s)ID_\S+/g) || []).join(' ');
});

$(".images").click(function() {
  var ids = $(this).attr("id");
  $("body").removeClass(function(index, className) {
    return (className.match(/(^|\s)ID_\S+/g) || []).join(' ');
  });
  $("body").addClass(ids);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<body>
  <div class="Container">
    <span class="images" id="ID_0">ID_0</span>
    <span class="images" id="ID_1">ID_1</span>
    <span class="images" id="ID_2">ID_2</span>
    <span class="images" id="ID_3">ID_3</span>
  </div>
</body>

</html>

score 1 · Answer 2 · answered Jun 20 '17 at 06:12

1

As far as I understand, you want override the classes of the body every time, yes? I think it's most convenient with vanilla JavaScript. See snippet below.

$(".images").click(function(){
      var ids = $(this).attr("id");
      document.body.classList = ''; // Empty class list
      document.body.classList += ids; // Could merge the two statements into document.body.classList = ids;
      console.log(document.body.classList); // debugging
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
  <div class="Container">
    <span class="images" id="ID_0">ID_0</span>
    <span class="images" id="ID_1">ID_1</span>
    <span class="images" id="ID_2">ID_2</span>
    <span class="images" id="ID_3">ID_3</span>
  </div>
</body>
</html>

answered Jun 20 '17 at 06:12

SVSchmidt

6,269
2
26
37

1

What if body has a class, let's say "blue" then you would also remove that – Carsten Løvbo Andersen Jun 20 '17 at 06:13
@CarstenLøvboAndersen Yep. This was how I understood the question. But I admit, I prefer your answer (have my upvote). – SVSchmidt Jun 20 '17 at 06:18
No i don't want to empty the body classes, I have a bunch of other css classes using in body tag this will empty all on clicking :D Sorry if my post was confusing, the html structure was just to show what im trying to do :) – Nippledisaster Jun 20 '17 at 06:21

score 0 · Answer 3 · answered Jun 20 '17 at 06:13

You can try this

$(".images").click(function(){
      var ids = $(this).attr("id");
      $("body").attr("class","").addClass(ids);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
  <div class="Container">
    <span class="images" id="ID_0">ID_0</span>
    <span class="images" id="ID_1">ID_1</span>
    <span class="images" id="ID_2">ID_2</span>
    <span class="images" id="ID_3">ID_3</span>
  </div>
</body>
</html>

Sorry, this will empty body classes on clicking,This will cause issues because i have a lot of css classes using in body tag — Nippledisaster, Jun 20 '17 at 06:19

jQuery/Javascript toggle between a bunch of classes on body tag

3 Answers3