Как правильно использовать функцию jQuery text()?

Question

Я хотел бы сделать список textarea и emoji, чтобы поместить emojis в это текстовое поле. Я пытаюсь сделать это с помощью jquery. У меня есть уль элемент, как это:

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

При нажатии на эту «ли» Я хотел бы, чтобы вставить это изображение в текстовое поле, так вот моя функция:

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

Но «мм «var пуст! Где я поступаю неправильно? Спасибо!

Answer 1

Изображение представляет собой элемент изображения, а не текстовый узел.

Вы можете использовать .html(), чтобы получить исходный код HTML для изображения и поместить его в текстовую область.

Вы можете использовать .find('img').attr('alt'), чтобы получить текст, альтернативный изображению (хотя у вас, кажется, есть непечатаемый персонаж для вашего).

Вы не можете изобразить изображение в текстовом поле.

Answer 2

вы можете использовать html() или innerHTML или textContent(). Вы получите данные html для отображения в текстовой области. если вы хотите отобразить изображение, используйте div. вместо этого. атрибут атрибута scr, например $('img').attr('src');, и постройте тег img с этим, чтобы показать в div.

Answer 3

Функция text() просматривает текст внутри тега. У вашего тега нет текста, у него есть изображение с атрибутом alt. Используйте это, чтобы получить атрибут.

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

Однако в вашем примере символ не может быть распечатан, поэтому он будет отображаться как квадратный квадрат в большинстве браузеров.