Question

当我点击OL“firstlist”中的文本时，我希望将确切的文本移动到另一个OL“seclist”。没有必要从第一个列表中删除该文本。我缺少的是如何从第一个列表中获取所选元素。我认为如果我们将所选项从第一个列表传递到click函数中的“var text”，其他人都会工作。请帮帮我。提前谢谢。

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

        <!--
        <input type="test" id="inputName" />
        <button id="btnName">Click me!</button>
        -->

        <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();
            });

            $('#firstlist').click(function(){
                //alert('To check it works');
                //var text = $('#inputName').val();
                //if(text.length){
                //  $('<li />', {html: text}).appendTo('ul.seclist')
                //}
            });
        </script>
    </body>
</html>

Answer 1

http://jsfiddle.net/WfKbk/1/

你可以重新追加项目

$('#firstlist li').click(function () { 
    $("#seclist").append($(this));
});

Answer 2

JSFiddle用于复制文字。

$('#firstlist').on( 'click', 'li' , function(){

    var $this = $(this),
        text = $this.text();

    $("#seclist").append('<li>' + text + '</li>');

})

从一个有序列表移动到另一个OL

2 个答案: