1

I am working on a solutions which is also described here.

Now I am close I think:

jQuery("#first-slide[data-isactiveslide="true"]").addClass("underline");

But I need to add the class to my ID (my button). How do I do this? I thought like this, but it doesn't work:

jQuery("#first-slide[data-isactiveslide="true"]"){
   jQuery("#my-button").addClass("underline");
});

Any help appreciated Best regards, Skt

EDIT here is an image from chrome dev tools: data is visible true

Skt
  • 45
  • 6
  • 1
    Try like this : `jQuery("#first-slide[data-isactiveslide='true']").length != 0 ? jQuery("#my-button").addClass("underline") : ""` – Swati May 04 '21 at 14:59
  • 2
    @Swati why use a conditional operator? it's literally the same number of characters as using an `if` here - it's not like you're even saving anything. – VLAZ May 04 '21 at 15:03
  • that looks much better than mine, but unfortunately, my site doesn't like it and I get a white page back. Could it be something with the code - could it be written differently? I usually end with "});" sorry I am a newbie... – Skt May 04 '21 at 15:03
  • 1
    @VLAZ I am not sure .. i saw this question and that came to my mind :P . – Swati May 04 '21 at 15:07
  • @Skt any error inside browser console ? – Swati May 04 '21 at 15:08
  • @Swati, I don't think so. – Skt May 04 '21 at 15:15
  • I added an image from chrome dev tools above – Skt May 04 '21 at 15:17

2 Answers2

1

You can wrap the jQuery selector in a if to check if it's found anything, if so, add the class to the button.

if (jQuery("#first-slide[data-isactiveslide='true']").length) {
  jQuery("#my-button").addClass("underline");
}
.underline { text-decoration: underline; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id='first-slide' data-isactiveslide='true'>#1</div>
<div id='second-slide' data-isactiveslide='false'>#2</div>

<button id='my-button'>Button</button>

Edit: Same code, with isactiveslide=false showing button is not underlined

if (jQuery("#first-slide[data-isactiveslide='true']").length) {
  jQuery("#my-button").addClass("underline");
}
.underline { text-decoration: underline; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id='first-slide' data-isactiveslide='false'>#1</div>

<button id='my-button'>Button</button>
freedomn-m
  • 27,664
  • 8
  • 35
  • 57
0stone0
  • 34,288
  • 4
  • 39
  • 64
  • yes, this almost works! The problem is, now when testing it, the data-isactiveslide="false" and despite this, the button is underlined. Very strange. As if it doesn't read the "true". – Skt May 04 '21 at 15:10
  • Mmm cant reproduce, If I change `data-isactiveslide='true'` to `data-isactiveslide='truteste'`, the button does not get the `underline` class. – 0stone0 May 04 '21 at 15:11
  • I added an image from chrome dev tools above – Skt May 04 '21 at 15:17
  • 1
    The dev tools image does not provide enough info to get whats wrong. Could you maybe add a [mre] to the question? – 0stone0 May 04 '21 at 15:31
  • @freedomn-m thank you, I must improve how I put questions. – Skt May 04 '21 at 15:41
0

I had been struggling for a while, and during our discussion, I realised that I could look for another attribute other than the one mentioned above. I used the attribute of the active slide instead, with CSS, and it works!:

rs-module.the-whole-slide[data-slideactive="rs-1899"] .my-button{text-decoration:underline !important;}

Based on help from @Shakti

I mean, using true or false would have been much nicer. If anyone solved it, it would be great... But what works, works right.

Sorry, this answer differs from the question since I didn't provide the above info.

Best, Skt

Skt
  • 45
  • 6