如何使用jquery之类的选择器模式选择多个类选择器

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>