使用javascript更改html中的foreach元素标签答案

【问题标题】：change label foreach element in html using javascript使用javascript更改html中的foreach元素标签
【发布时间】：2016-06-07 15:54:16
【问题描述】：

我同时使用 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 代码吗？

【问题讨论】：

标签： javascript html arrays foreach velocity

【解决方案1】：

document.getElementById() 一次只支持一个名称，并且只返回一个节点而不是节点数组。你应该使用一个类：

var views = document.getElementsByClassName('view');

var  i = views.length; 

while(i--) { 

      views[i].innerHTML = "Compare";
}

HTML

 <label class="view">Compare</label>

元素 ID 必须是唯一的。

希望对你有帮助。

【讨论】：

我试过了，但现在标签内容不会改变。 :(