javascript - 如何在没有 jQuery 的情况下按顺序向元素添加类

Question

我做了一些搜索，但只能找到 jQuery 示例。

我有一个用户输入来获取一个数字，该数字将与显示的元素数量相关。我正在尝试运行一个函数，将 shown 类添加到正确数量的元素中。

模板部分已显示，但类未添加到文章中。我在 Firebug 中没有收到任何错误。我做错了什么？

如果有更好的方法来实现这一目标，请告诉我。

请不要使用 jQuery。

我只是想根据 bannerCount 输入的值按顺序向每个文章元素添加一个类。

var numBanners = document.getElementById('bannerCount').value;
var template = 1;
var template1 = document.getElementById('template1');
var template2 = document.getElementById('template2');

function genTemplate() {
  if (template == 1) {
    template2.className = "hide";
    template1.className = "show";
    for (var i = 0; i < numBanners; i++) {
      var q = document.querySelector('#template1:nth-child(i)');
      q.className = "show";
    }
  } else if (template == 2) {
    template1.className = "hide";
    template2.className = "show";
    for (var i = 0; i < numBanners; i++) {
      var q = document.querySelector('#template2:nth-child(i)');
      q.className = "show";
    }
  }
}

<input type="number" id="bannerCount" value="1" min="1" max="10" name="bannerCount">

<input type="button" name="genTemplate" id="genTemplate" onClick="genTemplate();" value="Generate templates">

<section id="template1" class="hide">
  <article id="t11" class="t1"></article>
  <article id="t12" class="t1"></article>
  <article id="t13" class="t1"></article>
  <article id="t14" class="t1"></article>
</section>
<section id="template2" class="hide">
  <article id="t21" class="t2"></article>
  <article id="t22" class="t2"></article>
  <article id="t23" class="t2"></article>
  <article id="t24" class="t2"></article>
</section>

Answer 1

'#template1:nth-child(i)'

我想你想要

'#template1 > *:nth-child('+i+')'

尽管，正如评论者所说，该代码非常愚蠢，您可能应该循环遍历 template1.children

for(var i=0; i<numBanners; i++) {
  template1.children[i].className = "show"
}