html - 如何最好地在 html 中制作笑脸框

Question

我想在评论区上方添加一个包含笑脸图标的框，该框在单击时使用 jQuery 打开。我想出的是:

<div class="emo">
  <i href="#" id="showhide_emobox">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</i>
  <div id="emobox">
    <input class="emoticon" id="icon-smile" type="button" value=":)" />
    <input class="emoticon" id="icon-sad" type="button" value=":(" />
    <input class="emoticon"  id="icon-widesmile" type="button" value=":D" /> <br>

  </div>
</div>

CSS:

.emoticon-smile{
    background: url('../smileys/smile.png');
}

 #icon-smile {
     border: none;
     background: url('../images/smile.gif') no-repeat;  
}

jQuery:

 //  =======show hide emoticon div============
$('#showhide_emobox').click(function(){
    $('#emobox').toggle();
    $(this).toggleClass('active');

    });  


//  ============add emoticons============


 $('.emoticon').click(function() {
    var textarea_val = jQuery.trim($('.user-comment').val());
    var emotion_val = $(this).attr('value');

    if (textarea_val =='') {
    var sp = '';
    } else {
      var sp = ' ';  
    }
    $('.user-comment').focus().val(textarea_val + sp + emotion_val + sp);

    });   

但是我很难将按钮放在一个漂亮的数组中并为它们制作背景图像(按钮值出现在图像之前并且该数组不是完美的矩形。所以我想知道这可能不是呈现此框的最佳方式.

有什么想法可以正确地做到这一点吗？

Answer 1

首先显示图像，悬停时隐藏图像并显示文本。无需输入元素即可获取 Dom 节点的文本

像这样:

$(document).ready(function() {
  $(".wrapper").click(function() {
    var value = $(this).find(".smily-text").text();
    console.log(value);
    alert("Smily text is '" + value + "'");
  });
});

.smily {
  background: url(http://www.smiley-lol.com/smiley/manger/grignoter/vil-chewingum.gif) no-repeat center center;
  width: 45px;
  height: 45px;
}
.smily-text {
  display: none;
  font-size: 20px;
  text-align: center;
  line-height: 45px;
  height: 45px;
  width: 45px;
}
.wrapper {
  border: 1px solid red;
  float: left;
  cursor: pointer;
}
.wrapper:hover .smily {
  display: none;
}
.wrapper:hover .smily-text {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="smily"></div>
  <div class="smily-text">:)</div>
</div>
<div class="wrapper">
  <div class="smily"></div>
  <div class="smily-text">:(</div>
</div>
<div class="wrapper">
  <div class="smily"></div>
  <div class="smily-text">:]</div>
</div>
<div class="wrapper">
  <div class="smily"></div>
  <div class="smily-text">:[</div>
</div>