Question

我甚至不知道从哪里开始？！？非常感谢提示！

JS：

document.getElementById('first').getElementsByTagName('h3')(0).innerHTML = data.products[0].product;
document.getElementById('second').getElementsByTagName('h3')(0).innerHTML = data.products[1].product;
document.getElementById('third').getElementsByTagName('h3')(0).innerHTML = data.products[2].product;

document.getElementById('first').getElementsByTagName('p')(0).innerHTML = data.products[0].description;
document.getElementById('second').getElementsByTagName('p')(0).innerHTML = data.products[1].description;
document.getElementById('third').getElementsByTagName('p')(0).innerHTML = data.products[2].description;

document.getElementById('first').getElementsByTagName('h3')(0).setAttribute('class', data.products[0].code);
document.getElementById('second').getElementsByTagName('h3')(0).setAttribute('class', data.products[1].code);
document.getElementById('third').getElementsByTagName('h3')(0).setAttribute('class', data.products[2].code);

document.getElementById('first').setAttribute('code', data.products[0].code);
document.getElementById('second').setAttribute('code', data.products[1].code);
document.getElementById('third').setAttribute('code', data.products[2].code);

HTML：

<div class="items">
<ul>
<li id="first"><h3></h3><span><p></p><br><button>Find</button></span></li>
<li id="second"><h3></h3><span><p></p><br><button>Find</button></span></li>
<li id="third"><h3></h3><span><p></p><br><button>Find</button></span></li>
</ul>
</div>

Answer 1

尝试以下javascript：

var ids = ['first', 'second', 'third'];
for (var i = 0; i < ids.length; i++) {
    var product = data.products[i];
    var element = document.getElementById(ids[i]);

    element.getElementsByTagName('h3')[0].innerHTML = product.product;
    element.getElementsByTagName('p')[0].innerHTML = product.description;
    element.getElementsByTagName('h3')[0].setAttribute('class', product.code);
    element.setAttribute('code', product.code);
}

Answer 2

var element, index, len, ids, product, header;

ids = ['first', 'second', 'third'];
for (index = 0, len = ids.length; index < len; index++) {
  element = document.getElementById(ids[index]), product = data.products[index],
  header = element.getElementsByTagName('h3')[0];

  header.innerHTML = product.product;
  element.getElementsByTagName('p')[0].innerHTML = product.description;
  header.setAttribute('class', product.code);
  element.setAttribute('code', product.code);
}

Answer 3

根据经验，使用循环来执行任何重复性工作，并且如果您发现自己使用其中一个具有完全相同参数的document.get ...方法，则将结果存储在变量中以供以后使用

var ids = "first,second,third".split(",");
var el, h3;
for (var i = 0, il = ids.length; i<il;i++) {
    el = document.getElementById(ids[i]);
    h3 = el.getElementsByTagName('h3')[0];
    h3.innerHTML = data.products[i].product;
    el.getElementsByTagName('p')[0].innerHTML = data.products[i].description;
    h3.setAttribute('class', data.products[i].code);
    el.setAttribute('code', data.products[i].code);
}

Answer 4

使用关联数组。

var arr = new Array("first","second","third");
for(var i in arr) {
    //Now, i has the value first in first iteration & similarly ...
        //Do you assignments here using i
}

Answer 5

getElementsByTagName 在javascript [] 表示和数组元素中返回数组：而不是：

document.getElementById('first').getElementsByTagName('h3')(0).innerHTML = data.products[0].product;

使用：

document.getElementById('first').getElementsByTagName('h3')[0].innerHTML = data.products[0].product;

应该这样做!!!

我可以循环或重写代码以某种方式填充此列表吗？

5 个答案: