JQuery - QQ表情選擇（案例）
阿新 • • 發佈：2020-11-24
JQuery - QQ表情選擇
<!DOCTYPE html> <html> <head> <title>QQ表情選擇</title> <script src="../../js/jquery-3.3.1.min.js"></script> <style type="text/css"> *{margin: 0;padding: 0;list-style: none;} .emoji{margin:50px;} ul{overflow: hidden;} li{float: left;width: 48px;height: 48px;cursor: pointer;} .emoji img{ cursor: pointer; } </style> <script> //需求：點選qq表情，將其追加到發言框中 $(function () { //1.給img圖片新增onclick事件 $("ul img").click(function(){ //2.追加到p標籤中即可。 $(".word").append($(this).clone()); }); }); </script> </head> <body> <div class="emoji"> <ul> <li><img src="img/01.gif" height="22" width="22" alt="" /></li> <li><img src="img/02.gif" height="22" width="22" alt="" /></li> <li><img src="img/03.gif" height="22" width="22" alt="" /></li> <li><img src="img/04.gif" height="22" width="22" alt="" /></li> <li><img src="img/05.gif" height="22" width="22" alt="" /></li> <li><img src="img/06.gif" height="22" width="22" alt="" /></li> <li><img src="img/07.gif" height="22" width="22" alt="" /></li> <li><img src="img/08.gif" height="22" width="22" alt="" /></li> <li><img src="img/09.gif" height="22" width="22" alt="" /></li> <li><img src="img/10.gif" height="22" width="22" alt="" /></li> <li><img src="img/11.gif" height="22" width="22" alt="" /></li> <li><img src="img/12.gif" height="22" width="22" alt="" /></li> </ul> <p class="word"> <strong>請發言：</strong> <img src="img/12.gif" height="22" width="22" alt="" /> </p> </div> </body> </html>