如何正确使用 jQuery text() 函数？答案

【问题标题】：How to properly use jQuery text() function?如何正确使用 jQuery text() 函数？
【发布时间】：2014-12-17 17:19:13
【问题描述】：

我想制作一个文本区域和表情符号列表，以将表情符号放入此文本区域。我正在尝试使用 jquery 来实现。我有一个这样的 ul 元素：

<textarea id="TxtEmoji" class="textemoji" placeholder="Type a message here"></textarea>
button type="button" id="BtnEmoji" class="btnemoji">&#x1F600;</button>
<ul class="emoji-list">
                <li><img class="emoji" draggable="false" alt="????" src="http://twemoji.maxcdn.com/16x16/1f33e.png"></li>
            </ul>

当我点击这个“li”时，我想将此图像粘贴到 textarea 中，所以这是我的功能：

$(".emoji-list li").click(function () {  
    var mm = $(this).text();  
    var textVal = $("#TxtEmoji").val(); 
    $("#TxtEmoji").val(textVal + mm);     
});

但是“mm”变量是空的！我在哪里做错了？谢谢！

【问题讨论】：

标签： javascript jquery text input

【解决方案1】：

图像是图像元素，而不是文本节点。

您可以使用.html() 获取图像的 HTML 源代码并将其放在文本区域中。

您可以使用.find('img').attr('alt') 来获取图像的替代文本（尽管您似乎有一个非打印字符）。

您不能在文本区域中显示图像。

【讨论】：

【解决方案2】：

您可以使用html() 或innerHTML 或textContent()。您将获得要显示在文本区域中的html 数据。如果要显示图像，请改用div。get 属性 scr，如$('img').attr('src');，并用它构造img 标记以显示在 div 中。

【讨论】：

【解决方案3】：

text() 函数查看标签内的文本。您的标签没有文字，它有一个带有alt 属性的图像。使用它来获取属性。

$(".emoji-list li img").click(function () {  
    var mm = $(this).attr("alt");  
    var textVal = $("#TxtEmoji").val(); 
    $("#TxtEmoji").val(textVal + mm);     
});

但是在您的示例中，该字符不可打印，因此在大多数浏览器中它将显示为一个方框。

【讨论】：