If element has class, apply class to body-CodePudding

I have a website where each section displays as a full screen panel. I would like to style all the other elements on the page according to what panel is displaying. For example, if the panel with the class .style-reality-green-bg is active, I would like to style the navigation and other items to compliment the green.

Currently when you scroll, the full screen panel has a constant class called .onepage-section. When you scroll between panels, a second class is added depending on which panel is currently on screen. This is handled by the theme, but I set the panel classes

At the moment I have a few sections which have classes such as...

.style-reality-green-bg
.style-rebel-red-bg
.style-rethink-blue-bg

I can't style all the elements I need to because they are not children of these panels so I was trying to find a way to add the same class to the body when each panel was active. So - if .onepage-section has a class of .style-reality-green-bg add the class .style-reality-green-bg to the body as well.

I have done some digging but I can mostly only find examples for 'click' actions

My latest attempt is

if ($('.onepage-section').hasClass('style-reality-green-bg')) {
    $(this)body().addClass('style-reality-green-bg');
}

But it just returns an error saying

$ is not a function

****** EDIT

To clarify

What I am trying to achieve is...

If the full screen container has a class of

.onepage-section

AND a class of

.style-reality-green-bg

add

.style-reality-green-bg

to the body, and so on

I'm not sure if that was clear

CodePudding user response：

The reference to body seems malformed, the code should be

if ($('.onepage-section').hasClass('style-reality-green-bg')) {
    $('body').addClass('style-reality-green-bg');
}

if $ is still undefined, do you have jQuery included? https://jquery.com/

CodePudding user response：

Your error means that you dont include the external Jquery Library. You can use for example a cdn to include jquery. Add this line above your closing body tag. Good would be to inlcude jquery before your Jquery command is calling.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP u1T9qYdvdihz0PPSiiqn/ /3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

CodePudding user response：

It looks like you're trying to use jQuery but haven't imported the library. For that, see https://jquery.com/download/

Additionally, in your code snippet you should select the body with $('body').

Alternatively, if you want to use vanilla JavaScript, you can use the following snippet:

if (document.querySelector('.onepage-section').classList.contains('style-reality-green-bg')) {
  document.body.classList.add('style-reality-green-bg');
}

For information on classList, see https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

CodePudding user response：

$(this)body() doesn't exists. Better write this instead:

if ($('.onepage-section').hasClass('style-reality-green-bg')) {
    $('body').addClass('style-reality-green-bg');
}

And rememer to include jquery library.