I have 10 Elements where 2 of them always have a other data-attribute name, like 2 Elements have data-spot="lorem1" and the other two data-spot="lorem2" etc.
The Elements should be shown when I am in a specific position on the website - I already have the Function to get my position and it can output the position as a string like lorem1 lorem2 ...
The class elementspot has the style attribute opacity: 0; now I want to change the opacity of the Elements which have the data-spot name exactly like the loc output.
I did something like:
function showElement(loc) {
$(".elementspot").find("[data-spot='" + loc + "']")
}
But I don't really come further than that..
$(".elementspot").find("[data-spot='" + loc + "']") will try to find elements that have the relevant data-spot attribute inside elements with the elementspot class. From your description, though, the elementspot elements directly have the data-spot attribute. So to find elements that both have the class and have the data-spot attribute, use a compound selector:
$(".elementspot[data-spot='" + loc + "']")
or with a template literal, which makes it easier to avoid errors in the string:
$(`.elementspot[data-spot="${loc}"]`)
Then you need to do something to override the opacity on the elements. I'd use another class (perhaps show): .addClass("show"). (You might need to remove that class from other elements if showElement has been called before.)
So for instance:
function showElement(loc) {
// Remove class from other elements that may have it
$(`.elementspot[data-spot]`).removeClass("show");
// Add it to these ones
$(`.elementspot[data-spot="${loc}"]`).addClass("show");
}
with CSS along these lines:
.elementspot {
opacity: 0;
}
.elementspot.show {
opacity: 1;
}
Live Example:
function showElement(loc) {
// Remove class from other elements that may have it
$(`.elementspot[data-spot]`).removeClass("show");
// Add it to these ones
$(`.elementspot[data-spot="${loc}"]`).addClass("show");
}
$("input[data-loc]").on("click", ({currentTarget}) => {
const loc = currentTarget.getAttribute("data-loc");
showElement(loc);
});
.elementspot {
opacity: 0;
}
.elementspot.show {
opacity: 1;
}<div class="elementspot" data-spot="lorem1">data-spot=lorem1 (first)</div>
<div class="elementspot" data-spot="lorem1">data-spot=lorem1 (second)</div>
<div class="elementspot" data-spot="lorem2">data-spot=lorem2 (first)</div>
<div class="elementspot" data-spot="lorem2">data-spot=lorem2 (second)</div>
<div class="elementspot" data-spot="lorem3">data-spot=lorem3 (first)</div>
<div class="elementspot" data-spot="lorem3">data-spot=lorem3 (second)</div>
<input type="button" value="Show lorem1" data-loc="lorem1">
<input type="button" value="Show lorem2" data-loc="lorem2">
<input type="button" value="Show lorem3" data-loc="lorem3">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>