用最少的代碼更改多個元素的innerHTML

我有6個按鈕，點擊後每個按鈕都會顯示下面的唯一div。我只是想單擊時更改所述按鈕的innerHTML。我可以用一個帶有唯一ID的按鈕輕鬆完成此操作：用最少的代碼更改多個元素的innerHTML

<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個獨特標籤的東西？這一定很簡單。

來源

2017-08-06 Tom

您可以使用事件代理，即將事件hanlder附加到六個按鈕的父節點。

處理函數應該檢查實際點擊了哪個按鈕。您可以使用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"; 
    } 
});

來源

2017-08-06 03:00:26 jacktown

可以存儲在元件data-*屬性，它設置.dataset屬性作爲JSON所述一對值，轉換爲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>

來源

2017-08-06 03:04:10 guest271314

回聲到@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]; 
}

來源

2017-08-06 03:08:44 tibetty

感謝大家的答案，但我用了一個簡單的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"; 
    } 
    }); 
});

來源

2017-08-06 03:27:43 Tom

用最少的代碼更改多個元素的innerHTML

回答

相關問題