用最少的代码更改多个元素的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

回答

相关问题