Varios tramos que tienen ciertas clases.
<span class="1 click-1">1</span> <span class="2 click-2">2</span> <span class="3 click-3">4</span> <span class="4 click-4">4</span> Al hacer clic en un <span> dado, se muestra un DIV que contiene la misma clase. ¿Cómo hacerlo?
<div class="click-1">Hello!</div> <div class="click-2">Hello 2!</div> <div class="click-3">Hello 3!</div> <div class="click-4">Hello 4!</div>Necesito una solución de este tipo porque es un desarrollo del lado del CMS. El usuario puede agregar mucho más span y div. Así que el guión tiene que ser universal.
¿Buscas algo como esto?
document.querySelectorAll("span").forEach(e => { e.onclick = () => { // on click on span const div = document.createElement("div"); // create new div div.classList = e.classList; // copy and reuse class list div.innerText = `Hello ${e.innerText}!`; // set inner text to 'Hello ${}!' document.body.append(div); // append div to dom } }) span { display: block; } <span class="1 click-1">1</span> <span class="2 click-2">2</span> <span class="3 click-3">4</span> <span class="4 click-4">4</span> Clicking on a given <span> displays a DIV that contains the same class. How to do it?Dado que JQuery está etiquetado, los puntos a tener en cuenta son que solo se usará el segundo nombre de clase del intervalo para encontrar div con las mismas clases en el código a continuación.
$(document).on("click","span",function(){// attaching evt listner to all spans var getClass = $(this).prop('class').split(' ')[1];//get 2nd classname of span $(`div.${getClass}`).show(); // divs with such class //or $(`.${getClass}`).show(); // anything with such class });Este código funcionará con la sintaxis html dada anteriormente. Pero en los casos en que solo hay una clase en un lapso, no funcionará. Así que modifique el código en consecuencia o asegúrese de que la segunda clase de intervalo sea igual al nombre de clase de div que está tratando de mostrar.
var testElements = document.getElementsByClassName('click-1'); var testDivs = Array.prototype.filter.call(testElements, function(testElement){ return testElement.nodeName === 'DIV'; });