最小限のコードで複数の要素のinnerHTMLを変更する

Question

私は6つのボタンをクリックすると、下にユニークなdivが表示されます。私は単にクリックすると前記ボタンのinnerHTMLを変更したいと思います。一意のIDを持つ1つのボタンでこれを簡単に行うことができます：

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

... 5さらにチェックボックスには対応するラベルが付いています。

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

私の質問は、このJavaScriptブロックを6つの固有のラベルすべてに対して機能させるにはどうすればいいですか？これは単純でなければなりません。

Answer 1

イベントエージェントを使用すると、6ボタンの親ノードにイベントハンドラをアタッチできます。

ハンドラ関数は、実際にクリックされたボタンを確認する必要があります。これを実現するにはevent.targetプロパティを使用できます。そして、ターゲット要素（クリックされたボタン）のinnerHTMLを変更します。

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

あなたは、JSONとして.datasetプロパティを設定する要素data-*属性、で値のペアを格納するイベントハンドラでJavaScriptオブジェクトに変換し、現在の要素ではない配列を結果としての要素に.textContentを設定し、リピート手続きすることができます。

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

@jacktonするエコーあなたはgetElementByIdをを呼び出すことで要素を取得する必要がないように、あなたは、イベントハンドラにパラメータとしてこのを渡すことができます。イベントハンドラは、として実装することができます答えを

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

みんなありがとう、私は、単純なforEachを使用し、それぞれが同じclassにラベルを付けました。完璧に動作します。その答えが働いた@ guest271314に叫んでください。

<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"; 
    } 
    }); 
});