Question

我在为聊天制作一个小表情系统时遇到了问题。我正在使用HTML的data属性。因此，对于每个表情符号，它们都是不同的数据。

所以这是HTML部分

<div class="emoticons">
    <a href="#" data-emot=":)" class="emoticon"><img src="emots/emot-1.png" alt=":)" title=":)"></a>
    <a href="#" data-emot=";)" class="emoticon"><img src="emots/emot-2.png" alt=";)" title=";)"></a>
    <a href="#" data-emot=":(" class="emoticon"><img src="emots/emot-3.png" alt=":(" title=":("></a>
    <a href="#" data-emot=":D" class="emoticon"><img src="emots/emot-4.png" alt=":D" title=":D"></a>
    <a href="#" data-emot=":P" class="emoticon"><img src="emots/emot-5.png" alt=":P" title=":P"></a>
    <a href="#" data-emot="=)" class="emoticon"><img src="emots/emot-6.png" alt="=)" title="=)"></a>
    <a href="#" data-emot=":|" class="emoticon"><img src="emots/emot-7.png" alt=":|" title=":|"></a>
    <a href="#" data-emot="=|" class="emoticon"><img src="emots/emot-8.png" alt="=|" title="=|"></a>
    <a href="#" data-emot=">:|" class="emoticon"><img src="emots/emot-9.png" alt=">:|" title=">:|"></a>
    <a href="#" data-emot=">:D" class="emoticon"><img src="emots/emot-10.png" alt=">:D" title=">:D"></a>

    <a href="#" data-emot="o_O" class="emoticon"><img src="emots/emot-11.png" alt="o_O" title="o_O"></a>
    <a href="#" data-emot="=O" class="emoticon"><img src="emots/emot-12.png" alt="=O" title="=O"></a>
    <a href="#" data-emot="<3" class="emoticon"><img src="emots/emot-13.png" alt="<3" title="<3"><!--3--></a>
    <a href="#" data-emot=":S" class="emoticon"><img src="emots/emot-14.png" alt=":S" title=":S"></a>
    <a href="#" data-emot=":*" class="emoticon"><img src="emots/emot-15.png" alt=":*" title=":*"></a>
    <a href="#" data-emot=":$" class="emoticon"><img src="emots/emot-16.png" alt=":$" title=":$"></a>
    <a href="#" data-emot="=B" class="emoticon"><img src="emots/emot-17.png" alt="=B" title="=B"></a>
    <a href="#" data-emot=":-D" class="emoticon"><img src="emots/emot-18.png" alt=":-D" title=":-D"></a>
    <a href="#" data-emot=";-D" class="emoticon"><img src="emots/emot-19.png" alt=";-D" title=";-D"></a>
    <a href="#" data-emot="*-D" class="emoticon"><img src="emots/emot-20.png" alt="*-D" title="*-D"></a>
</div>

这是我的JS

/* Emoticons part */
$('a[href]').click(function(){
    var emot = $('.emoticon').attr('data-emot');
    $('#inputvalue').val($('#inputvalue').val() + emot);    
});

所以问题是，当我按下表情符号时，它需要给我 :-)或; - ）/（y）。现在它一直给我这个：）。所以它一直给我这个列表中的第一个，有人可以帮助我吗？

非常感谢您提前！英语不是我的母语，我为任何语法错误的语法道歉:-)

Answer 1

使用这个而不是＆＃34; .emoticon＆＃34;，因为你想要那个链接的情感而不是其他的类＆＃34;表情符号＆＃34;

       $('a[href]').click(function(){

            var emot = $(this).attr('data-emot');

                $('#inputvalue').val($('#inputvalue').val() + emot);    
          });

Answer 2

只需更改

var emot = $('.emoticon').attr('data-emot');

到此：

var emot = $(this).attr('data-emot');

正在选择不正确的数据

2 个答案: