If Data Attribute Is True, Add Class
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 th
Solution 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.
Solution 2:
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);
})
<divclass="menu1"data-is-active-slide='true'>1</div><divid="test1"></div><divclass="menu1"data-is-active-slide='false'>2</div><divid="test1"></div><divclass="menu1">3</div><divclass="menu2"data-is-active-slide='false'>4</div><divclass="menu2">5</div><divclass="menu1"data-is-active-slide>6</div><divid="test1"></div><divclass="menu2">7</div><divclass="menu1 menu2"data-is-active-slide="true">8</div><divid="test1"></div><divclass="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.
Post a Comment for "If Data Attribute Is True, Add Class"