只针对JS中的多个选择器 [英] Target multiple selectors in JS only

问题描述

我想要定位多个选择器。

$ b $我想在没有jQuery的情况下在我的网站上实现点击事件。 b

在jQuery中，这可以通过简单的逗号分开来完成，如下所示。

  jQuery（document）.on （'click'，'＃test1，＃test2'，function（event）{
 alert（$（this）.text（））; 
}）; 
  

如何以简单的javascript轻松完成这项工作？

我已经尝试了下面的工作，但似乎应该有一个更简单的方法，特别是如果我不仅仅需要点击时发生警报，​​还会发生这种情况。我想针对多个特定的选择器而不是所有的div，例如

  var test1 = document.getElementById（'test1'）; 
 var test2 = document.getElementById（'test2'）; 
 
 if（test1.addEventListener || test2.addEventListener）{
 test1.addEventListener（'click'，function（event）{$ b $ alert（this.innerHTML）; 
}）; 
 test2.addEventListener（'click'，function（event）{
 alert（this.innerHTML）; 
}）; 
 $ b $ / *这只适用于单击test2 
（test1，test2）.addEventListener（'click'，function（event）{
 alert（this.innerHTML）; 
}）; 
 * / 
 / *仅当您点击test2 
（test1.addEventListener），（test2.addEventListener）（'click'，function（event）{
 alert （this.innerHTML）; 
}）; 
 * / 
} 
  

var test1 = document .getElementById（ 'TEST1'）; var test2 = document.getElementById（'test2'）;如果（test1.addEventListener || test2.addEventListener）{test1.addEventListener（'click'，function（event）{alert（this.innerHTML）;}）; test2.addEventListener（'click'，function（event）{alert（this.innerHTML）;}）; }

< div id =test1> test1< ; / div>< div id =test2> test2< / div>

b $ b

有没有办法用逗号来分隔选择器，或者在运行代码之前设置所有选择器，就像使用jQuery一样？


解决方案

  document.body.addEventListener（click，function （e）{//将事件绑定到文档var targ = e.target; //获取点击var id = targ.id; //获取id if（[test1，test2]。indexOf （id）！==  -  1）{//查看它是否是其中一个alert（targ.textContent）; //显示文本}}，false）;  

 < div id =test1> test 1< / div>< div id =test2> test 2< / div>< div id =test3> test 3< / div> ;  

I am trying to implement a click event on my site without jQuery.

I want to target multiple selectors.

In jQuery this can be done by simply comma seperating the items as shown below.

jQuery(document).on('click', '#test1, #test2', function (event) {
    alert($(this).text());
});

How can this easily be done in plain javascript?

I have tried the below which works but it seems like there should be a simpler way especially if I want more than an alert to occur on click? I want to target more than one specific selector not all divs for example

var test1 = document.getElementById('test1');
var test2 = document.getElementById('test2');

if (test1.addEventListener || test2.addEventListener) {
    test1.addEventListener('click', function(event) {
        alert(this.innerHTML);
    });
    test2.addEventListener('click', function(event) {
        alert(this.innerHTML);
    });

    /* this only works when you click on test2
    (test1,test2).addEventListener('click', function(event) {
        alert(this.innerHTML);
    });
    */
    /* this only works when you click on test2
    (test1.addEventListener),(test2.addEventListener)('click', function(event) {
        alert(this.innerHTML);
    });        
    */
}

    var test1 = document.getElementById('test1');
    var test2 = document.getElementById('test2');
    if (test1.addEventListener || test2.addEventListener) {
        test1.addEventListener('click', function(event) {
            alert(this.innerHTML);
        });
        test2.addEventListener('click', function(event) {
            alert(this.innerHTML);
        });
    }

<div id="test1">test1</div>
<div id="test2">test2</div>

Is there a way to comma seperate the selectors, or setup all selctors before running the code like you can with jQuery?

解决方案

This would be basically the equivalent code minus all the browser checking:

document.body.addEventListener("click", function(e) {  //bind event to the document
   var targ = e.target;  //get what was clicked on
   var id = targ.id;  //grab the id
   if (["test1","test2"].indexOf(id)!==-1){ //see if it is one of the ids
       alert(targ.textContent);    //show the text
   }
}, false);

<div id="test1">test 1</div>
<div id="test2">test 2</div>
<div id="test3">test 3</div>

这篇关于只针对JS中的多个选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！