在将元素从另一个 UL 动态添加到无序列表的同时添加图像答案

【问题标题】：Add image while adding elements to a unordered list from another UL dynamically在将元素从另一个 UL 动态添加到无序列表的同时添加图像
【发布时间】：2014-07-23 09:32:13
【问题描述】：

当我单击将鼠标悬停在文本上时出现的图像时，该元素将移动到另一个 UL。我需要与第一个列表中相同的图像选项来删除它。我不知道如何动态添加它。有人可以帮忙吗？提前致谢。

图片链接是：

https://www.signaturecontrolsystems.com/Support/SmallRedX.gif

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Example</title>

        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
        <script type = "text/javascript" src = "js/jquery.js"></script>
        <script type = "text/javascript" src = "js/jquery_ui.js"></script>
        <link rel="stylesheet" href="/resources/demos/style.css">       
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

        <style>
            #firstlist li:hover img {display: inline;}
            #firstlist li:hover { background: #CCF5CC; }
            #firstlist .ui-selected { background: #80B280; }
            #firstlist { list-style-type: none;}
            #firstlist li { margin: 3px; padding: 0.3em;}

            #seclist {list-style-type: none;}
            #seclist li {padding: 0.4em;}

            img {display:none;}
        </style>
    </head>

    <body>
        <table id="myTable" class= "table table-bordered">
            <tr>
                <th class="col-md-6 text-center success">
                    List 1
                </th>
                <th class="col-md-6 text-center success">
                    List 2
                </th>
            </tr>
            <tr>    
                <td class="col-md-6">
                    <ul id="firstlist">
                        <li>Apple <img src="next.jpg" class = "list1"></li>
                        <li>Orange <img src="next.jpg" class = "list1"></li>
                        <li>Avacado <img src="next.jpg" class = "list1"></li>
                        <li>Banana <img src="next.jpg" class = "list1"></li>
                        <li>Mango <img src="next.jpg" class = "list1"></li>
                    <ul>    
                </td>
                <td class="col-md-6">
                    <ul class = "seclist" id = "seclist"> </ul>
                </td>
            </tr>
        </table>

        <script>        
            $(function(){
                $( "#firstlist" ).selectable();
            });

            $(function() {
                $( "#seclist" ).selectable();
            });

            $(".list1").click(function() {
                var text = $(this).closest("li").text();
                $('<li />', {html: text}).appendTo('ul.seclist')
                $(this).unbind('click');
            });
        </script>
    </body>
</html>

【问题讨论】：

我想在列表 2 中的文本旁边添加图像，因为它发生在列表 1 中。由于
是动态添加的，我不知道如何在
标签旁边添加图像。

【解决方案1】：

$(".list1").click(function() {
                var text = $(this).closest("li").text();
                $('<li/>', {html: text}).addClass("ui-selectee").appendTo('ul.seclist').append("<img src='cancel.jpg' class = 'list2 ui-selectee'/>");
                this.style.visibility = 'hidden';
            });

            $('ul').on('click', '.list2', function(e) {
                $(this).parent('li').remove();

                var liTwo = $(this).closest("li").text();
                var listItems = $("#firstlist li");

                listItems.each(function(li) {
                    var liOne = $(this).text();
                    if(liTwo.match(liOne)){
                        document.getElementById(liOne.trim()).style.visibility = 'visible';
                    }
                });
            });

【讨论】：

您希望将什么事件绑定到该按钮以及对该事件执行什么操作？
不是这样的。当我单击该按钮时，它一定不允许用户再次单击它。并且当单击一次时，文本将被移动到另一个列表。并且当用户单击另一个列表上的图像（即删除添加的任何元素）时，必须从列表 2 中删除该文本，并且必须像以前一样使用未绑定（禁用）图像。这样用户可以再次选择它，单击后它会禁用，并且可以重复此过程。如果你愿意，我可以更新我正在处理的当前代码
对不起！但没有让你清楚！将项目添加到右侧列表后（单击左侧列表中的项目上的按钮后）您要做什么？单击按钮时是否要从右侧列表中删除该项目？
先生，我已经编辑了您的帖子。有两个功能。一个将列表 1 中的选定文本添加到带有图像的列表 2 中。然后另一个在单击图像时删除该元素。当单击列表 1 上的图像时，必须绑定单击的图像，当我从列表 2 中删除与列表中的项目相对应的项目时，必须能够再次单击。清楚吗。对不起，我英语不好。
忘了提，我用“可见性做我想做的事”。但是，是否可以使用绑定和取消绑定，以便图像将在那里，但是当用户单击它时，将不会完成任何功能。

【解决方案2】：

Demo Fiddle

尝试使用.html()，而不是.text()

替换

var text = $(this).closest("li").text();

到

var text = $(this).closest("li").html();

根据文档

.text():- 获取匹配元素集合中每个元素的组合文本内容，包括它们的后代，或者设置匹配元素的文本内容。

.html():- 获取匹配元素集中第一个元素的 HTML 内容或设置每个匹配元素的 HTML 内容。

简单地说，.text() 方法的结果是一个字符串，而.html() 方法的结果是第一个匹配元素的 HTML 内容。

【讨论】：