Modifier innerHTML de plusieurs éléments avec le moins de code possible

Question

J'ai 6 boutons qui, lorsqu'ils sont cliqués, révèlent chacun un div ci-dessous. Je voudrais simplement changer le innerHTML desdits boutons après avoir été cliqué. Je peux le faire assez facilement avec un bouton avec un ID unique:

<input type="checkbox" name="tabs" id="tab-one"> 
<label for="tab-one" id="one">Read More</label> 

... 5 cases à cocher avec les étiquettes correspondantes.

var tabLabel = document.getElementById('one'); 
tabLabel.addEventListener("click", function() { 
    if (this.innerHTML=="Read More") { 
    this.innerHTML = "Collapse"; 
    } else { 
    this.innerHTML = "Read More"; 
    } 
}); 

Ma question est comment puis-je transformer ce bloc de JavaScript en quelque chose qui fonctionnera pour les 6 étiquettes uniques? Cela doit être simple.

Answer 1

Vous pouvez utiliser l'agent d'événement, qui consiste à attacher l'événement au nœud parent du six boutons.

La fonction gestionnaire doit vérifier quel bouton est réellement cliqué. Vous pouvez utiliser la propriété event.target pour réaliser cela. Puis changez l'innerHTML de l'élément cible (le bouton cliqué).

var labelsParent = document.getElementById('one').parentNode; 
labelsParent.addEventListener("click", function(event) { 
    var target = event.target || event.srcElement; 
    if (target.innerHTML=="Read More") { 
    target.innerHTML = "Collapse"; 
    } else { 
    target.innerHTML = "Read More"; 
    } 
}); 

Answer 2

Vous pouvez stocker la paire de valeurs à l'élément data-* attribut, qui définit .dataset propriété comme JSON, convertir en objet JavaScript au gestionnaire d'événements, définissez .textContent à l'élément de tableau résultant qui n'est pas l'élément en cours, répéter la procédure .

onload =() => { 
 
    for (let label of document.querySelectorAll("label[for]")) { 
 
    label.onclick =() => { 
 
     let [curr, next, {textContent}] = [...JSON.parse(label.dataset.t), label]; 
 
     label.textContent = textContent === curr ? next : curr; 
 
    } 
 
    } 
 
}

<label for="tab-one" id="one" data-t='["Read More", "Collapse"]'>Read More</label> 
 
<label for="tab-two" id="two" data-t='["Read More", "Collapse"]'>Read More</label> 
 
<label for="tab-three" id="three" data-t='["Read More", "Collapse"]'>Read More</label> 
 
<label for="tab-four" id="four" data-t='["Read More", "Collapse"]'>Read More</label> 
 
<label for="tab-five" id="five" data-t='["Read More", "Collapse"]'>Read More</label> 
 
<label for="tab-six" id="six" data-t='["Read More", "Collapse"]'>Read More</label>

Answer 3

Echo à @jackton, vous pouvez passer ce comme paramètre de gestionnaire d'événements afin que vous n'avez pas besoin de récupérer l'élément en appelant getElementById. Le gestionnaire d'événements peut être mis en œuvre:

var textArray = ['Collapse', 'Read More'...]; // put all your ping-pong text in this array 

function onClick(el) { 
    let idx = textArray.indexOf(el.innerHTML); 
    el.innerHTML = textArray[idx % 2? idx - 1, idx + 1]; 
} 

Answer 4

Merci à tous pour les réponses, mais j'utilisé simple forEach et a chaque étiquette même class. Fonctionne parfaitement. Crier à @ guest271314, dont la réponse a également travaillé.

<input type="checkbox" name="tabs" id="tab-one"> 
<label for="tab-one" class="one">Read More</label> 

var elements = document.querySelectorAll('.one'); 
elements.forEach(function(elem) { 
    elem.addEventListener("click", function() { 
    if (this.innerHTML=="Read More") { 
     this.innerHTML = "Collapse"; 
    } else { 
     this.innerHTML = "Read More"; 
    } 
    }); 
});