Question

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

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

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

如果有更好的方法可以实现这一点，请告诉我。

请不要jQuery。

我只是想根据bannerCount输入的值，依次为每个article元素添加一个类。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

'#template1:nth-child(i)'

我想你想要

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

虽然像评论者说的那样，代码非常愚蠢，你应该只是循环遍历template1.children

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

Answer 2

像这样：

var pre = onload;
function onload = function(){
if(pre)pre();
var doc = document, bod = doc.body;
function T(e, t){
  return e.getElementsByTagName(t);
}
function E(e){
  return doc.getElementById(e);
}
function inArray(v, a){
  for(var i=0,l=a.length; i<l; i++){
    if(a[i] === v){
      return true;
    }
  }
  return false;
}
function removeClass(c, e){
  var x = c.split(/\s/), s = e.className.split(/\s/), r = [];
  for(var i=0,l=s.length; i<l; i++){
     if(!inArray(s[i], x))r.push(s[i]);
  }
  e.className = r.join(' ');
}
function addClass(c, e){
  var s = e.className.split(/\s/);
  if(!inArray(c, s)){
    s.push(c); e.className = s.join(' ');
  }
}
function showArticles(secId, num){
  var aa = T(E(secId), 'article');
  for(var i=0,l=aa.length; i<l; i++){
    var a = aa[i];
    removeClass('show', a); addClass('hide', a);
  }
  for(var i=0; i<num; i++){
    var a = aa[i];
    removeClass('hide', a) addClass('show' a);
  }
}
showArticles('template1', 2);
}

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

2 个答案: