我同时使用 html 和velocity 并想出了这段代码。名称和图像存储在一个数组中,这是我用来将该数组的每个内容显示到页面的代码。
#foreach($starter in $starter)
<div class="product">
<div class="color"><img src= "$starter.img" width="100" height="100"></div>
<span class="product-name">$starter.name</span>
<div class="compare-wrap">
<input type="checkbox" id="">
<label id="view">Compare</label>
</div>
</div>
#end
我希望标签从“比较”更改为“查看比较”,同时在选中相应的复选框后将其 id 存储在数组中。我最终想出了这段代码:
var checkedArray = [];
$(":checkbox").change(function(){
if((this).checked){
checkedArray.push(this.id);
document.getElementById('view').innerHTML = "<a href='/compare'>View Compare</a>";
}
else{
checkedArray.splice(checkedArray.indexOf(this.id), 1);
document.getElementById('view').innerHTML = 'Compare';
}
var str = checkedArray.join(', ');
alert(str);
});
但它似乎只适用于数组的第一个内容。知道此时如何使用 foreach 代码吗?
最佳答案
document.getElementById()
一次仅支持一个名称,并且仅返回单个节点而不是节点数组。您应该使用一个类:
var views = document.getElementsByClassName('view');
var i = views.length;
while(i--) {
views[i].innerHTML = "Compare";
}
HTML
<label class="view">Compare</label>
元素 ID 必须是唯一的。
希望有帮助。
关于javascript - 使用javascript更改html中每个元素的标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35617735/