如果数据属性为真，则添加类

Question

我希望滑块中的按钮在幻灯片可见时带有下划线。 我想我需要检查一个数据属性是否为真，然后添加类。

检查我的网页时，我在属性 > 数据集：DOMStringMap > isactiveslide: "true" 中找到了这个

我需要检查一张幻灯片是否有 isactiveslide: "true"（甚至是 data-isactiveslide: "true"），然后添加类。

我想我很接近并尝试了这两个代码：

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

和

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

编辑（在一些很棒的答案和问题之后添加）

这是从页面复制的数据属性“isactiveslide”出现的部分：

<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"><

因此，下一张尚未显示的幻灯片具有 data-isactiveslide="false"。我认为，识别“真实”是我可以添加类的方法。

编辑 5 月 4 日 - 我想我现在很接近了，但它仍然不起作用。

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

非常感谢任何帮助！

Answer 1

可以通过 css 轻松完成： 您需要找到在活动幻灯片和按钮上应用的类

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

或

找到您正在使用的滑块，并在该滑块的幻灯片更改事件上应用按钮上的类以进行样式设置。

Answer 2

试试这个代码：

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>

$ 的开头声明只是简单地定义它，因为我没有导入 jQuery。

下一部分是“乐趣”的开始。我使用$(".menu1[data-is-active-slide]") 选择所有具有menu1 类和data-is-active-slide 存在的属性的元素。然后，我只是在函数内部定义了一个动作，以证明它有效。