如何轉換JQuery中的addEventListener函數？

-1

我是jQuery的新希望這段JavaScript代碼轉換成jQuery的如何轉換JQuery中的addEventListener函數？

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'; 
     } 
     ....... 
}

來源

2017-02-09 User1979

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上。

來源

2017-02-09 10:33:01

的if{..}else{...}一長串是一種代碼異味，無論你使用香草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>

來源

2017-02-09 10:30:11 Jamiec

-1

按照jquery sintax來做到這一點。如果你有兩個以上的選擇器，jQuery中的循環與javascript是一樣的。

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

來源

2017-02-09 10:35:12 Marco

如何轉換JQuery中的addEventListener函數？

回答

相關問題