jquery表情符号点击功能

jquery emoticon click function

本文关键字：功能 符号 jquery      更新时间：2023-09-26

我有一个关于jquery click函数的问题。我已经在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));
    });

您犯了一些错误。您可以获取任何调用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更新

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

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演示

相关文章：