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>