Why is my jquery only applying to the 1st if statement only and ignoring the rest?

Question

I have this script code:

$(document).ready(function() {
                if ($("div[data-content='content-1']").hasClass("slide--current")) {
                    $("body").addClass("mobile-app");
                    $("body").removeClass("web-app");
                    $("body").removeClass("design-app");
                }
                if ($("div[data-content='content-2']").hasClass("slide--current")) {
                    $("body").addClass("web-app");
                    $("body").removeClass("mobile-app");
                    $("body").removeClass("design-app");
                }
                if ($("div[data-content='content-3']").hasClass("slide--current")) {
                    $("body").removeClass("web-app");
                    $("body").removeClass("mobile-app");
                    $("body").addClass("design-app");
                }
            });
        </script>

But for some reason the query only runs the first script code and doesnt follow up if the slide-current is applied to a different data-content, I have tried adding an else if to each but that didnt fix anything. Also when data-content 2 and 3 have class "slide--current` nothing applies from my script for some reason...

Am I approaching this the wrong way?

`$(document).ready` will invoke only once Document Object Model (DOM) is ready. — Rayon, Oct 07 '22 at 08:08
I have tried without `$(document).ready` as well, but the result was still the same — RandomCoder, Oct 07 '22 at 08:09
@Rayon - Substantially before the `window.onload` event, but yes indeed, it only happens once. @RandomCoder - Why are you expecting the code to get run more than once (with or without the `ready` wrapper)? In general, code runs once unless you have something in place (a loop, or in this case probably an event handler or a call from elsewhere) to make it run more than once. — T.J. Crowder, Oct 07 '22 at 08:10
That does not change the situation. You need this code to be executed every time you change the properties. — Rayon, Oct 07 '22 at 08:10
@T.J.Crowder basically, I have 3 sliders. depending on which one is active, I want to add a class to the body tag to change the background-image of the entire page — RandomCoder, Oct 07 '22 at 08:11
@RandomCoder - I understand, but again, what makes you think the code above would run again when the class changes? You have to do something to make that happen, [like this](https://stackoverflow.com/questions/10612024/event-trigger-on-a-class-change). — T.J. Crowder, Oct 07 '22 at 08:12
@T.J.Crowder got ya, thanks that solved my problem, I am just not very good at js and that stuff, I thought my code was telling the page to listen to the contains of a classlist and if it has that apply a different class to the body depending on the change. — RandomCoder, Oct 07 '22 at 08:34

mplungjan · Accepted Answer · 2022-10-07T08:55:26.740

Here is a slideshow based on what I can deduct from your code

$(function() {
  // Slideshow
  const $contents = $("div[data-content^='content']"); // starts with content
  const appClasses = ["mobile-app", "web-app", "design-app"]; // your three other classes
  const len = appClasses.length; // how many?
  let cnt = 0;
  let tId = setInterval(() => {
      appClasses.forEach((cls, i) => { // run over the list of types of content
        $contents.eq(i)[i === cnt ? "addClass" : "removeClass"]("slide--current"); // if the counter matches the index of the class, add else remove
        $("body")[i === cnt ? "addClass" : "removeClass"](cls)
      });
      cnt++;
      if (cnt >= len) cnt = 0; // wrap
    },
    2000)
});

.mobile-app {
  background-color: green;
}

.web-app {
  background-color: yellow;
}

.design-app {
  background-color: red;
}

.slide--current {
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div data-content="content-1">One</div>
<div data-content="content-2">Two</div>
<div data-content="content-3">Three</div>

yup something like this is exactly what I was trying to do, at the end I used a method found here https://stackoverflow.com/questions/10612024/event-trigger-on-a-class-change and it worked the same way your code works, but yours is more simpler and easier to understand thanks again — RandomCoder, Oct 07 '22 at 08:39

Why is my jquery only applying to the 1st if statement only and ignoring the rest?

1 Answers1