javascript - 在被点击的元素之后追加元素

Question

我的 eventListener 不能正常工作。我想在被点击的 $( ".new-slide") 之前附加一个元素 newSlideDiv 。如何正确制作？这是我的错误代码。

现在，代码会在每个新的滑动按钮之前附加 newSlideDiv。

  var newSlideButton = document.querySelectorAll('.new-slide');
    for (var i = 0; i < newSlideButton.length; i++) { 
        newSlideButton[i].addEventListener('click', function(){
        newSlide(); }, false )
    }
   var newSlide = function() {
        var newSlideDiv = $('<div class="step slide">
         <h2>New Slide</h2></div>');
        $( ".new-slide").before(newSlideDiv);      
    }

Answer 1

使用this，这是回调中被点击的元素:

var newSlideButton = document.querySelectorAll('.new-slide');
for (var i = 0; i < newSlideButton.length; i++) { 
    newSlideButton[i].addEventListener('click', newSlide, false )
}
var newSlide = function() {
    var newSlideDiv = $('<div class="step slide">
     <h2>New Slide</h2></div>');
    $(this).before(newSlideDiv);      
}

但是当你使用 jQuery 时，你不需要使用 querySelectorAll :

$('.new-slide').click(function(){
 var newSlideDiv = $('<div class="step slide"><h2>New Slide</h2></div>');
 $(this).before(newSlideDiv);      
});