asked on
Select element based on data attribute
Is it possible to select an element based on a value set on its data attribute?
For example, I thought I could use:-
The idea eventually is be a bit more dynamic with the data value, so something like:-
eg https://jsfiddle.net/8yansth1/
Any ideas???
For example, I thought I could use:-
$("div").find("[data-btn='1']").css({'background-color':'#232323'});
<div data-btn="1">1</div>
<div data-btn="2">2</div>
<div data-btn="3">3</div>
<div data-btn="4">4</div>
<div data-btn="5">5</div>
The idea eventually is be a bit more dynamic with the data value, so something like:-
$("div").find("[data-btn='" + $(this).val() . "']").css({'background-color':'#232323'});
eg https://jsfiddle.net/8yansth1/
Any ideas???
jQuery
Last Comment
Michel Plungjan
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
and also $("div[data-btn='1']").css
find search inside the containter not at the same level
Alternative for you to consider
https://jsfiddle.net/mplungjan/e7ofusrw/
using
https://jsfiddle.net/mplungjan/e7ofusrw/
$(function() {
$("button").on("click", function() {
$('div[data-btn]').removeClass('active')
$(`div[data-btn="${this.textContent}"]`).addClass('active')
});
});
using
[data-btn="1"].active { background-color: #232323; }
[data-btn="2"].active { background-color: #ff2323; }
[data-btn="3"].active { background-color: #ffcc23; }
[data-btn="4"].active { background-color: #ffccdd; }
[data-btn="5"].active { background-color: #ffaaff; }