多的ID具有相同的JavaScript代碼

Question

我有此其與這個網站碼

<span "id="comment'.$id.'">Comment</span>

$id工作JavaScript代碼是例如不同數目的（1，2，3，4）

HTML代碼

1. <span "id="comment1">Comment</span>
2. <span "id="comment2">Comment</span>
3. <span "id="comment3">Comment</span>

JavaScript代碼

$('[id^=comment]').click(function() { 

this.insertAdjacentHTML("afterend", '\ <div class="cmt-container" >\ <div class="new-com-bt">\ <span >Write a comment ...</span>\ </div>\ <div class="new-com-cnt">\ <textarea class="the-new-com"></textarea>\ <div class="bt-add-com">Post comment</div>\ <div class="bt-cancel-com">Cancel</div>\ </div>\ <div class="clear"></div>\ </div>' ）;

$(function(){ //alert(event.timeStamp); $('.new-com-bt').click(function(event){
$(this).hide(); $('.new-com-cnt').show(); $('#name-com').focus(); }); /* when start writing the comment activate the "add" button */ $('.the-new-com').bind('input propertychange', function() { $(".bt-add-com").css({opacity:0.6}); var checklength = $(this).val().length; if(checklength){ $(".bt-add-com").css({opacity:1}); } });

/* on clic on the cancel button */ 
    $('.bt-cancel-com').click(function(){ 
     $('.the-new-com').val(''); 
     $('.new-com-cnt').fadeOut('fast', function(){ 
      $('.new-com-bt').fadeIn('fast'); 
     }); 
    }); 

    // on post comment click 
    $('.bt-add-com').click(function(){ 
     var theCom = $('.the-new-com'); 
     var theName = $('#name-com'); 
     var theMail = $('#mail-com'); 

     if(!theCom.val()){ 
      alert('You need to write a comment!'); 
     }else{ 
      $.ajax({ 
       type: "POST", 
       url: "/", 
       data: 'act=add-com&id_post='+'&comment='+theCom.val(), 
       success: function(html){ 
        theCom.val(''); 
        theMail.val(''); 
        theName.val(''); 
        $('.new-com-cnt').hide('fast', function(){ 
         $('.new-com-bt').show('fast'); 
         $('.new-com-bt').before(html); 
        }) 
       } 
      }); 
     } 
    }); 

}); 

}）;

什麼我想要做的是，當點擊註釋1代碼的工作只爲註釋1

Answer 1

通過使用var child = $('[id^=comment]')您選擇所有選擇器匹配的元素。爲了只選擇觸發特定事件的元素，你必須使用：

var child = $(e.target); 

或者簡單：

var child = $(this); 

---

當心：

在你的情況，無論你使用什麼，你都會得到一個錯誤，因爲insertAdjacentHTML不是一個jQuery方法，但是一個原生的JavaScript。所以，你只需要使用this或e.target。

---

全碼：

/* ----- JavaScript ----- */ 
 
$('[id^=comment]').click(function() { 
 
    this.insertAdjacentHTML("afterend", '\ 
 
    <div class="cmt-container" >\ 
 
     <div class="new-com-bt">\ 
 
     <span >Write a comment ...</span>\ 
 
     </div>\ 
 
     <div class="new-com-cnt">\ 
 
     <textarea class="the-new-com"></textarea>\ 
 
     <div class="bt-add-com">Post comment</div>\ 
 
     <div class="bt-cancel-com">Cancel</div>\ 
 
     </div>\ 
 
     <div class="clear"></div>\ 
 
    </div>' 
 
    ); 
 
});

<!----- HTML -----> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<span id="comment1">Comment</span> 
 
<span id="comment2">Comment</span> 
 
<span id="comment3">Comment</span>