时间戳

首页 > 解决方案 > 如何使用类似选择器模式的 jquery 选择多个类选择器

javascript - 如何使用类似选择器模式的 jquery 选择多个类选择器

问题描述

我正在尝试创建一个 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(.) 选择器。

标签： javascriptfunctionconstructor

解决方案

我会大胆猜测您是否想让该.hide()方法适用于所有具有该类的元素。

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

您需要在方法内部进行迭代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>

推荐阅读