jquery emoticon click функция

Question

У меня есть один вопрос о jquery click функция. Я создал этот demo на jsfiddle.

В этой демонстрации вы можете увидеть, есть три textarea и смайлики. Когда вы нажимаете на один смайлик, что-то идет не так, потому что смайликsticker="(w1)" добавляется во все три textarea s.

Как исправить эту проблему?
Кто-нибудь может мне помочь в этом отношении?

HTML:

<div class="container one"> 
<textarea class="add-y-comment" name="comment" id="ctextarea453" data-id="453" placeholder="First Text area"></textarea> 

<div class="stiemo"><img src="http://img1.wikia.nocookie.net/__cb20140214223249/clubpenguin/images/e/e1/CPNext_Emoticon_-_Winking_Face.png" class="sm-sticker" sticker="(w1)"> click for first textarea</div> 
</div> 



<div class="container two"> 
<textarea class="add-y-comment" name="comment" id="ctextarea453" data-id="453" placeholder="Second Text area"></textarea> 

<div class="stiemo"><img src="http://img1.wikia.nocookie.net/__cb20140214223249/clubpenguin/images/e/e1/CPNext_Emoticon_-_Winking_Face.png" class="sm-sticker" sticker="(w1)"> click for second textarea</div> 
</div> 



<div class="container tree"> 
<textarea class="add-y-comment" name="comment" id="ctextarea453" data-id="453" placeholder="Third Text area"></textarea> 

<div class="stiemo"><img src="http://img1.wikia.nocookie.net/__cb20140214223249/clubpenguin/images/e/e1/CPNext_Emoticon_-_Winking_Face.png" class="sm-sticker" sticker="(w1)"> click for third textarea</div> 
</div> 

JS:

$('body').on('click', '.sm-sticker', function(event) { 
    event.preventDefault(); 
     var id = $(this).attr('id'); 
     var sticker = $(this).attr('sticker'); 
     var msg = jQuery.trim($('.add-y-comment').val()); 

     if(msg == ''){ 
      var sp = ''; 
     } else { 
      var sp = ' '; 
     } 
     $('.add-y-comment').val(jQuery.trim(msg + sp + sticker + sp)); 
    }); 

Answer 1

Вы сделали некоторые неурядицы. Берешь значение любого поля вызывающего add-y-comment, но вы только хотите предназначаться текущую с $(this)

Во-первых, создание переменной, потому что мы будем использовать его несколько раз

var theComment = $(this).parents('.container').find('.add-y-comment'); 

Затем переключитесь в этом

var msg = jQuery.trim(theComment.val()); 

И, наконец (после того, как код), добавьте это:

theComment.val(jQuery.trim(msg + sp + sticker + sp)); 

Полный код:

$('body').on('click', '.sm-sticker', function(event) { 
    event.preventDefault(); 
    var theComment = $(this).parents('.container').find('.add-y-comment'); 
    var id = $(this).attr('id'); 
    var sticker = $(this).attr('sticker'); 
    var msg = jQuery.trim(theComment.val()); 

    if(msg == ''){ 
     var sp = ''; 
    } else { 
     var sp = ' '; 
    } 

    theComment.val(jQuery.trim(msg + sp + sticker + sp)); 
}); 

JSFIDDLE обновленного

Answer 2

Его только из ваших двух линий сниппеты -

var msg = jQuery.trim($('.add-y-comment').val()); 
. 
. 
. 
$('.add-y-comment').val(jQuery.trim(msg + sp + sticker + sp)); 

В обеих этих линиях вы не получать и обновлять значение textarea, который присутствует непосредственно перед нажатием смайлика. Вот правильный код для него -

var msg = jQuery.trim($(this).parent('.stiemo').prev('.add-y-comment').val()); 
. 
. 
. 
$(this).parent('.stiemo').prev('.add-y-comment').val(jQuery.trim(msg + sp + sticker + sp)); 

JSFIDDLE DEMO