javascript - 选择的数据不正确

Question

我在为聊天制作一个小表情符号系统时遇到问题。我正在使用 HTML 的数据属性。这样每个表情符号的数据都是不同的。

这就是 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

使用它而不是“.emoticon”，因为您想要该链接的情感，而不是其他具有“emoticon”类的链接

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

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

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