мульти идентификаторы с одинаковым яваскриптом кодом

Question

У меня есть этот яваскрипта код, который работает с этим HTML кодом

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

$id это другое число, например (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); 
        }) 
       } 
      }); 
     } 
    }); 

}); 

});

, что я хочу сделать, это когда comment1 щелкнул код работает только для comment1

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>