Question

我是javascript的初学者，刚刚开始使用DOM。在几个不同的地方抓住一堆具有不同ID名称的跨度并从对象文字中获取数据后，它似乎开始变得多余。是不是有更好的写作方式？我也在学习功能，但不确定如何将它们联系在一起。这是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

最好不要使用带有候选名称1，候选名称2和候选名称3等附加数字的id名称，而是将其替换为可以重复使用的类，如候选者（简化示例）：

<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>

然后你可以一次选择它：

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

然后你通过for循环迭代（你可以在这里应用其他元素）：

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

Answer 2

因为你正在遍历candidates votingData内的数组对象，您可以使用循环遍历数组并减少重复量。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

2 个答案: