Question

我正在尝试创建一个id（＃）和一个class（。）CSS选择器。例如。 [pluginName（selector）]与我的小插件中的jQuery类似。 getElementById可以很好地工作，但是getElementByClassName不能与for循环一起在页面上选择多个选择器。这就是我到目前为止所得到的。

  function $(selector){
    if(typeof string !== 'string' || !selector){
      return false;
    }
    if(selector){
      if(window === this){
        return new $(selector);
      }
      var selectorType = 'querySelectorAll';
      if(selector.indexOf('#') === 0){
        selectorType = 'getElementById';
        selector = selector.substr(1,selector.length);
        this.el = document[selectorType](selector);
        return this;
      } else if(selector.indexOf('.') === 0){
        selectorType = 'getElementsByClassName';
        selector = selector.substr(1,selector.length);
       this.el = document[selectorType](selector);
       var i = 0;
       for(i = 0; i < this.el.length; i++){
       this.el[i];
       }
       return this;
    }
  }

我最终得到了这样的东西。

$.prototype = {
hide: function(){
  this.el.style.display = 'none';
  return this;
};

然后：

var btns = document.querySelector('.btn');
btns.addEventListener('click', myshow);
function myshow(){
  $('.showoff').hide();
}

HTML：

<button class="btn">Try it</button> <br>
<p id="showoff">ELEMENT</p> <br>
<p class="showoff">ELEMENT</p>

现在的问题是我如何遍历class（。）选择器，以便可以在提供代码的页面上选择多个class（。）选择器。

Answer 1

function select(selector) {
   var selectors = selector.split(',')
   for(i=0;i<selectors.length;i++) {  
       /// code
   }
}

select('#id,.class1,.class2')

Answer 2

我会大胆地猜测您想使.hide()方法对具有该类的所有元素都有效。

看起来您已经意识到getElementsByClassName返回一个NodeList（不是单个元素，而是一个可迭代的集合），但是直接在$()构造函数中进行迭代是没有意义的。

您需要在hide方法内进行迭代：

编辑：添加链接方法示例

'use strict';
function $(selector) {
  if(!this){
    return new $(selector);
  }
  this.el = document.querySelectorAll(selector)
  return this
}

$.prototype = {
  hide: function() {
    for (var i = 0; i < this.el.length; i++) {
      this.el[i].style.display = 'none'
    }
    return this
  },
  click: function(callback) {
    for (var i = 0; i < this.el.length; i++) {
      this.el[i].onclick = callback
    }
    return this
  },
  showBlockLater: function(ms) {
    var el = this.el
    setTimeout(function() {
      for (var i = 0; i < el.length; i++) {
        el[i].style.display = 'block'
      }
    }, ms)
    return this
  }
}


$('.btn').click(myshow)
var showoff = $('.showoff')
function myshow() {
  showoff.hide().showBlockLater(1000)
}

<button class="btn">Try it</button>
<p class="showoff">ELEMENT</p>
<p class="showoff">ELEMENT</p>

如何像选择器模式一样使用jQuery选择多个类选择器

2 个答案: