Question

我是jQuery的新手，想在jQuery中转换这个javascript代码

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

if{..}else{...}的长列表是一个代码，无论你使用的是vanilla JS还是jQuery。那是你应该解决的问题，jQuery使用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>

关于你收到的错误：

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

请将您的整个代码发布在帖子中，或将其放在jsfiddle上。

Answer 3

按照jquery sintax这样做。如果你有两个以上的选择器，那么jquery中的循环与javascript相同。

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

如何在JQuery中转换addEventListener函数？

3 个答案: