Question

0

56

Vistas

Change style attribute when two variables have same value

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

7 months ago · Santiago Gelvez

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-07-22T17:05:37.876Z

$(".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>