使用 Object literal 多次使用 getElementByID 的有效方法？

Question

我是 javascript 的初学者，刚开始使用 DOM。在几个不同的地方抓取了一堆具有不同 ID 名称的 span 并从对象文字中抓取数据后，它似乎开始变得多余了。有没有更好的写法？我也在学习函数，但不确定如何将它们联系在一起。这是 JSfiddle 以便于查看。 https://jsfiddle.net/q5366wzb/

HTML:

<fieldset id="candidates">
   <legend>Candidates</legend>
   <div>
   <label for="cand1">Candidate 1</label>
   <span class="candidate" id="cand1"></span>
   <span class="party" id="party1"></span>
</div>

<div>
  <label for="cand2">Candidate 2</label>
  <span class="candidate" id="cand2"></span>
  <span class="party" id="party2"></span>
 </div>

 <div>
  <label for="cand3">Candidate 3</label>
  <span class="candidate" id="cand3"></span>
  <span class="party" id="party3"></span>
 </div>
 </fieldset>

  <fieldset id="statistics">
  <div>
  <h2>Results for Candidate 1</h2>
   <div id="candidateName1"></div>
   <label for="cand1pct">Percentage</label>
   <output id="cand1pct"></output>
  </div>
  <div>
  <h2>Results for Candidate 2</h2>
  <div id="candidateName2"></div>
  <label for="cand2pct">Percentage</label>
  <output id="cand2pct"></output>
  </div>
  <div>
  <h2>Results for Candidate 3</h2>
  <div id="candidateName3"></div>
  <label for="cand3pct">Percentage</label>
  <output id="cand3pct"></output>
  </div>
  </fieldset>

JS

var votingData = {
  candidates: [{
  name: "Harry S. Truman",
  party: "Democratic"
},
{
  name: "Thomas E. Dewey",
  party: "Republican"
},
{
  name: "Strom Thurmond",
  party: "Dixiecrat"
}]
};


 document.getElementById("cand1").innerHTML = 
 votingData.candidates[0].name;
 document.getElementById("candidateName1").innerHTML = 
 votingData.candidates[0].name;
 document.getElementById("party1").innerHTML = 
 votingData.candidates[0].party;

 document.getElementById("cand2").innerHTML = 
 votingData.candidates[1].name;
 document.getElementById("candidateName2").innerHTML = 
 votingData.candidates[1].name;
 document.getElementById("party2").innerHTML = 
 votingData.candidates[1].party;

 document.getElementById("cand3").innerHTML = 
 votingData.candidates[2].name;
 document.getElementById("candidateName3").innerHTML = 
 votingData.candidates[2].name;
 document.getElementById("party3").innerHTML = 
 votingData.candidates[2].party;

Answer 1

由于您正在遍历 candidates votingData 内的数组 object 你可以有一个循环遍历数组并减少重复的数量。

var votingData = {
  candidates: [{
    name: "Harry S. Truman",
    party: "Democratic"
  }, {
    name: "Thomas E. Dewey",
    party: "Republican"
  }, {
    name: "Strom Thurmond",
    party: "Dixiecrat"
  }]
};

var candidates = votingData.candidates;

for (var i = 0; i < candidates.length; i++) {
  var currentId = i + 1;
  document.getElementById("cand" + currentId).innerHTML = candidates[i].name;
  document.getElementById("candidateName" + currentId).innerHTML = candidates[i].name;
  document.getElementById("party" + currentId).innerHTML = candidates[i].party;
}

<fieldset id="candidates">
  <legend>Candidates</legend>
  <div>
<label for="cand1">Candidate 1</label>
<span class="candidate" id="cand1"></span>
<span class="party" id="party1"></span>
  </div>

  <div>
<label for="cand2">Candidate 2</label>
<span class="candidate" id="cand2"></span>
<span class="party" id="party2"></span>
  </div>

  <div>
<label for="cand3">Candidate 3</label>
<span class="candidate" id="cand3"></span>
<span class="party" id="party3"></span>
  </div>
</fieldset>

<fieldset id="statistics">
  <div>
<h2>Results for Candidate 1</h2>
<div id="candidateName1"></div>
<label for="cand1pct">Percentage</label>
<output id="cand1pct"></output>
  </div>
  <div>
<h2>Results for Candidate 2</h2>
<div id="candidateName2"></div>
<label for="cand2pct">Percentage</label>
<output id="cand2pct"></output>
  </div>
  <div>
<h2>Results for Candidate 3</h2>
<div id="candidateName3"></div>
<label for="cand3pct">Percentage</label>
<output id="cand3pct"></output>
  </div>
</fieldset>

Answer 2

最好不要使用像candidateName1、candidateName2和candidateName3这样加号的id名，而是用一个可以重复使用的class代替，比如candidate（简化的例子）：

<fieldset id="statistics">
  <div>
  <h2>Results for Candidate 1</h2>
   <div class="candidate"></div>
  </div>
  <div>
  <div class="candidate"></div>
  </div>
  <div>
  <div class="candidate"></div>
  </div>
  </fieldset>

然后你就可以select一下子搞定了：

var candidates = document.getElementsByClassName('candidate');

然后通过 for 循环进行迭代（您也可以在此处应用其他元素）：

for (var i = 0, n = votingData.candidates.length; i < n; i++) {
    candidates.innerHTML = votingData.candidates[i];
}

使用 Object literal 多次使用 getElementByID 的有效方法？

An efficient way of using getElementByID multiple times with Object literal?

javascript

arrays

object

getelementbyid