Tengo 10 Elementos donde 2 de ellos siempre tienen otro nombre de atributo de datos, como 2 Elementos tienen data-spot="lorem1"
y los otros dos data-spot="lorem2"
etc. Los Elementos deben mostrarse cuando estoy en una posición específica en el sitio web: ya tengo la función para obtener mi posición y puede generar la posición como una cadena como lorem1
lorem2
...
La clase elementspot
tiene el atributo de estilo opacity: 0;
ahora quiero cambiar la opacidad de los Elementos que tienen el nombre del punto de datos exactamente como la salida loc
.
Hice algo como:
function showElement(loc) { $(".elementspot").find("[data-spot='" + loc + "']") }
Pero realmente no voy más allá de eso...
$(".elementspot").find("[data-spot='" + loc + "']")
intentará encontrar elementos que tengan el atributo data-spot
relevante dentro de los elementos con la clase elementspot
. Sin embargo, según su descripción, los elementspot
de elementos tienen directamente el atributo data-spot
. Entonces, para encontrar elementos que tengan la clase y el atributo data-spot
, use un selector compuesto:
$(".elementspot[data-spot='" + loc + "']")
o con un literal de plantilla, lo que facilita evitar errores en la cadena:
$(`.elementspot[data-spot="${loc}"]`)
Luego, debe hacer algo para anular la opacidad de los elementos. Usaría otra clase (quizás show
): .addClass("show")
. (Es posible que deba eliminar esa clase de otros elementos si se ha llamado a showElement
antes).
Entonces, por ejemplo:
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"); }
con CSS a lo largo de estas líneas:
.elementspot { opacity: 0; } .elementspot.show { opacity: 1; }
Ejemplo en vivo:
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>