Question

在我的网页中，我有一个输入法和一个用微笑打开弹出窗口的按钮。当用户点击一次微笑时，输入值将更改为“当前值”＆＃39; +＆＃39;：smile1：＆＃39;，例如。但是，我有大约28个微笑图标，这种方式发送表情符号有点困难。如何让这个过程更容易？因为在此之后，我需要解析所有28个微笑并检查输入值是否等于其中一个。

我的弹出窗口：

<div class="smile-popuptext" id="smPopup">
<div class="smile1"></div>
<div class="smile2"></div>
<div class="smile3"></div>
//.....and other 25 divs
</div>

我发送笑容的功能：

    $('.smile1').on('click', function () {
    var message = $('#message').val() + ' :smile1:';
    $('#message').val(message);
});

Answer 1

我建议给所有按钮一个单独的类，并给它们唯一的ID。

这样的事情：

<div class="smile-popuptext" id="smPopup">
<div class="smile" id="smile1"></div>
<div class="smile" id="smile2"></div>
<div class="smile" id="smile3"></div>
//.....and other 25 divs
</div>

然后：

$('.smile').on('click', function () {
  var message = $('#message').val() + ' :' + this.id + ':';
  $('#message').val(message);
});

JSFiddle

Answer 2

您可以在容器上绑定EventListener并将值定义为data属性：

＆＃13;

var container = document.querySelector('.smile-popuptext');
container.addEventListener('click', function(event) {
  var target = event.target;
  var emoji = target.getAttribute('data-emoji');
  if(emoji) {
     console.log('clicked', [':', emoji, ':'].join(''));
  }
});

＆＃13;

<div class="smile-popuptext" id="smPopup">
  <div class="sm1" data-emoji="smile1">1</div>
  <div class="sm2" data-emoji="smile2">2</div>
  <div class="sm3" data-emoji="smile3">3</div>
</div>

＆＃13;

Answer 3

标记没有变化：

＆＃13;

$('#smPopup div[class^="smile"]').on('click', function () {
    var message = $('#message').val() + ' :' + this.className + ':';
    $('#message').val(message);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="smile-popuptext" id="smPopup">
    <div class="smile1">smile 1</div>
    <div class="smile2">smile 2</div>
    <div class="smile3">smile 3</div>
</div>

<textarea id="message"></textarea>

＆＃13;

如何使用jquery发送表情符号？

3 个答案: