Javascript jquery表情点击功能

我有一个关于jquery

click

函数的问题。我在JSFIDLE上创建了这个

在这个演示中，您可以看到有三个

textarea

和smiley。当您单击一个笑脸时，就会出现问题，因为在所有三个

文本区域中都添加了笑脸
贴纸=“（w1）”

如何解决此问题？

在这方面有人能帮我吗

HTML:

你弄糊涂了。您可以获取调用
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));
});

更新了
这只是因为你的两行代码片段-

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


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

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