如何在JQuery中转换addEventListener函数？

Question

i'm new in jQuery and would like to convert this javascript code in jQuery

var trigger = document.querySelectorAll('.item');
for (var i = 0; i < trigger.length; i++) {
     trigger[i].addEventListener('click', function () {
        if (this == trigger[0]) {
            position = '1';
        } else if (this == trigger[1]) {
            position = '2';
        }
        .......
} 

Answer 1

A long list of if{..}else{...} is a codesmell, no matter if you're using vanilla JS or jQuery. That is the bit you should be solving, and jQuery makes that easier using index()

 $('ul').on('click','.item',function(){ var position = $(this).index()+1; console.log(position); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li class="item">Item1</li> <li class="item">Item2</li> <li class="item">Item3</li> <li class="item">Item4</li> </ul> 

Answer 2

 var trigger = $('.item'); trigger.click(function() { if (this == trigger[0]) { position = '1'; alert('first clicked'); } else if (this == trigger[1]) { position = '2'; alert('second clicked'); } }); 

 .item { margin: 5px; display: inline-block; height: 50px; width: 50px; background-color: lightblue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='item'></div> <div class='item'></div> 

And about the error you are receiving:

Error "Uncaught TypeError: sizeListItem[i].on is not a function"

Please post your whole code in your post, or drop it on jsfiddle.

Answer 3

Follow jquery sintax to do that. If you have more than 2 selectors, do loop in jquery is the same of javascript.

 $('.item:nth-of-type(1) ').click(function() {
  position = '1';
 });
 $('.item:nth-of-type(2) ').click(function() {
      position = '2';
 });