Question

我希望我的应用程序执行以下操作。有2个有序列表。一个是元素而另一个是空的。当我将鼠标悬停在文本旁边的第一个列表上时，必须显示图像，当我单击图像时，文本必须移动到另一个有序列表。如果我点击文本，就不会发生任何事情。根据我第一次点击时所做的一切都正常。如果我点击文字我不会移动，当我点击图像我移动。但在那之后一切都会出错。当我点击图像时，它会显示两次我选择的内容，当我点击第三次时，它会显示我所选择的三倍，并且在第一次选择后我可以单击文本将其移动到另一个列表。请帮我解决这个问题。提前致谢。

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

        <style>
            #feedback { font-size: 1.4em; }
            #firstlist .ui-selecting { background: #FECA40; }
            #firstlist .ui-selected { background: #F39814; color: white; }
            #firstlist { list-style-type: none; margin: 0; padding: 0; width: 20%; }
            #firstlist li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
            #firstlist li:hover img { display: block; }

            #seclist .ui-selecting { background: #FECA40; }
            #seclist .ui-selected { background: #F39814; color: white; }
            #seclist { list-style-type: none; margin: 0; padding: 0; width: 20%; }
            #seclist li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }

            img
            {
                position:relative;
                left:232px;
                top:-25px;
                display:none;
            }
        </style>
    </head>

    <body>

        <table id="myTable">
            <td>
                <tr>
                    <ol id="firstlist">
                        <li>Item 1 <img src="next.jpg" id="next1"></li>
                        <li>Item 2 <img src="next.jpg" id="next2"></li>
                        <li>Item 3 <img src="next.jpg" id="next3"></li>
                        <li>Item 4 <img src="next.jpg" id="next4"></li>
                        <li>Item 5 <img src="next.jpg" id="next5"></li>
                    </ol>
                </tr>

                <tr>
                    <ul class = "seclist" id = "seclist">
                    </ul>
                </tr>
            </td>
        </table>

        <script language="javascript">
            //function to display the immage
            function show(id,disp) {
                if (disp == true) {
                    id.style.display = "block";
                }

                if (disp == false) {
                    id.style.display = "none";
                }
            }
        </script>

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

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

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

Answer 1

您错误地嵌套了您的事件处理程序。每次点击<img>时，都会将新的事件处理程序附加到#firstlist li，每次点击img中的任何内容（包括<li>标记）时，都会触发事件。每次单击<img>标记时，它都会附加一个新事件（不清除旧事件），还会触发现有的附加事件。这就是为什么在第一次点击时你得不到回应，第二次触发一次，第三次发生两次，依此类推。

尝试更改此内容：

$("img").click(function() {
    $('#firstlist li').click(function(){
        var $this = $(this),
        text = $this.text();
        $('<li />', {html: text}).appendTo('ul.seclist')
    });
});

对此：

$('#firstlist li img').click(function(){
    var $this = $(this),
    text = $this.parent().text();
    $('<li />', {html: text}).appendTo('ul.seclist')
});

Answer 2

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

这可能有用。请试一试

移动列表功能无法正常工作

2 个答案: