1

私の eventListener が正しく動作しません。クリックされたnewSlideDivの前に要素を追加したいと思います。$( ".new-slide")正しく作る方法は？これが私の間違ったコードです。

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);      
    }
4

2 に答える 2

0

次のことを試すことができます。

HTML が次のようなものであると仮定します。

  <div class="step slide new-slide">
  <h2>New Slide 1</h2>
  </div>
  <div class="step slide new-slide">
  <h2>New Slide 2</h2>
  </div>

この JS を使用して新しい要素を追加し、他の div と同じ動作を与えることもできます。

var counter = 3; //Use to distinguish new added DIVs
var newSlide = function(e) {
    //Create the elem to insert
    var newSlideDiv = $('<div class="step slide"><h2 class="new-slide">New Slide '+ counter+'</h2></div>');
    counter++;
    //Insert it before the clicked element
    $(e.target).before(newSlideDiv);
    //Add the listener to have the same behavior
    $(newSlideDiv).addEventListener('click',function(e) { newSlide(e);}, false );

    }

//Initialize the DIV elems in the HTML with the listener    
var newSlideButton = $('.new-slide');
for (var i = 0; i < newSlideButton.length; i++) { 
    newSlideButton[i].addEventListener('click',function(e) { newSlide(e);}, false )
}
于 2013-09-16T17:54:42.813 に答える