if data attribute is true, add class

Question

I want buttons in a slider to get underlined when a slide is visible. I think I need to check if a data attribute is true, and then add class.

When inspecting my webpage, I find this in properties > dataset: DOMStringMap > isactiveslide: "true"

I need to check if a slide has isactiveslide: "true" (or even data-isactiveslide: "true") and then add class.

I think I am close and have tried these two codes:

jQuery(function () {
  if (jQuery('menu1').attr('isactiveslide') === true) {
    jQuery(this).find("#test1").addClass("underline");
  }
})

and

jQuery('menu1').each(function(){
    if(jQuery(this).attr('isactiveslide')==true())
        jQuery('#test1').addClass('underline');
})

EDIT (added after some great answers and questions)

And here is the section, where the data attribute "isactiveslide" occurs, copied from the page:

<rs-slide data-key="rs-1898" data-title="WORKS" data-in="o:0;" data-out="a:false;" class="menus works1" id="works1" data-originalindex="2" data-origindex="1" data-description="" data-sba="" data-scroll-based="false" style="overflow: hidden; height: 100%; width: 100%; z-index: 20; opacity: 1; visibility: inherit;" data-owidth="300" data-oheight="200" data-rspausetimeronce="0" data-isactiveslide="true"><

So, the next slide which is not yet shown has data-isactiveslide="false". I reckon, identifying "true" is how I can add class.

EDIT May 4th - I think I am close now, but it still does not work.

jQuery('#slide1[data-isactiveslide="true"]')("#slide1-btn").addClass('.underline');

any help is very appreciated!

You can use the data attributes - https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes. — Endothermic_Dragon, Mar 26 '21 at 21:55
@Endothermic_Dragon thanks for the link. It is hard for me. I think I understand how to get the attribute, but I have no idea how to check if it belongs to a div in order to add a class to another div... — Skt, Mar 26 '21 at 22:29
I'm not sure what you mean by that. Are you looking for a sub-div inside the element? If so, then any of the functions used to search for an element would work - `querySelector`, `querySelectorAll`, `getElementsByTagName`, `getElementsByClassName`, `getElementsByName`, `getElementById`, etc. To use it, simply do `element.getElem...`. Note how this is done on the element, instead of `document`. — Endothermic_Dragon, Mar 26 '21 at 23:32
if you can take a look at the code from May 4th, I'd be grateful! I have added it in the original post, I think it's close; jQuery('#slide1[data-isactiveslide="true"]')("#slide1-btn").addClass('.underline'); — Skt, May 04 '21 at 14:28

Shakti · Accepted Answer · 2021-03-28T01:00:48.027

1

Can be easily done by css: You need to find the class applied on the active slide and button

rs-slide.menus[data-isactiveslide="true"] .button-class-name-here{
       text-decoration:underline!important;
}

or

Find which slider you are using and on the slide change event of that slider apply the class on the button for styling.

edited Mar 28 '21 at 01:00

answered Mar 26 '21 at 23:41

Shakti

723
8
15

Hi, only CSS is also what I suspected when reading about it. However, I could not get it to work. I have added the HTML in the original post, perhaps that could clear things? – Skt Mar 27 '21 at 12:38
@Skt is the button inside the slide with data attribute true or outside of that slide? – Shakti Mar 28 '21 at 00:57
Oh, you're right! It's outside the slide, in the "global layers" so it's visible on all slides. – Skt Mar 28 '21 at 09:05
I found another attribute and solved it like this, based on your help: rs-module.the-whole-slide[data-slideactive="rs-1899"] .my-button{text-decoration:underline !important;} Thank you! – Skt May 04 '21 at 16:33
Glad to hear that :) – Shakti May 04 '21 at 17:20

score 0 · Answer 2 · answered Mar 26 '21 at 23:29

0

Try this code:

var $ = document.querySelectorAll.bind(document) //No need for jquery - simply import the function
$(".menu1[data-is-active-slide]").forEach((el, index) => {
  $("#test1")[index].classList.add('underline');
  $("#test1")[index].innerText = "Selected!";
  console.log(1);
})

<div class="menu1" data-is-active-slide='true'>1</div>
<div id="test1"></div>
<div class="menu1" data-is-active-slide='false'>2</div>
<div id="test1"></div>
<div class="menu1">3</div>
<div class="menu2" data-is-active-slide='false'>4</div>
<div class="menu2">5</div>
<div class="menu1" data-is-active-slide>6</div>
<div id="test1"></div>
<div class="menu2">7</div>
<div class="menu1 menu2" data-is-active-slide="true">8</div>
<div id="test1"></div>
<div class="menu1 menu2">9</div>

The beginning declaration of $ is simply defining it since I did not import jQuery.

The next part is where the 'fun' begins. I used $(".menu1[data-is-active-slide]") to select all elements with class menu1 and with the property that data-is-active-slide is present. Then, I simply defined an action inside the function, for the sake of demonstrating that it works.

answered Mar 26 '21 at 23:29

Endothermic_Dragon

1,147
3
13

Hi, this looks wonderful. I have tried a bit, but I cannot combine it with the existing HTML. I have added it to the original post! What do you think? – Skt Mar 27 '21 at 12:37
Try doing this before the `forEach`: `$(".menu1[data-isactiveslide='true']")` – Endothermic_Dragon Mar 27 '21 at 13:08
I understand! But unfortunately, it doesn't work. – Skt Mar 27 '21 at 19:39
Thanks! It is indeed a great suggestion. It should work. I am quite sure I have done everything right – Skt Mar 27 '21 at 19:40
if you can take a look at the code from May 4th, I'd be grateful! I have added it in the original post, I think it's close; jQuery('#slide1[data-isactiveslide="true"]')("#slide1-btn").addClass('.underline'); – Skt May 04 '21 at 14:29
What is the ID of the element you are trying to select? Is it `slide1` or `slide1-btn`? – Endothermic_Dragon May 06 '21 at 00:13
In either case, you would do something like `jQuery('#slide1[data-isactiveslide="true"]').addClass('underline')` or `jQuery('#slide1-btn[data-isactiveslide="true"]').addClass('underline')`, depending on which one you are looking for. – Endothermic_Dragon May 06 '21 at 00:15
Hi, thanks for the reply. I need both IDs in this case: checking if #slide1 is true and if yes, add class to #slide1-btn – Skt May 07 '21 at 06:02
Is `#slide1-btn` a subelement inside `#slide1`? – Endothermic_Dragon May 07 '21 at 14:52
Try this: `jQuery('#slide1[data-isactiveslide="true"]', '#slide1-btn').addClass('underline')` – Endothermic_Dragon May 10 '21 at 00:29

if data attribute is true, add class

2 Answers2

Linked