-2

次のhtmlページがあります。移動ボタンを押すと、最初の div から特定の項目 (item2) を削除し、2 番目の div に追加したいと考えています。(最終的にこれらのアイテムは画像に置き換えられます..しかし、それは後で...)

<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

    <style>
            #div1 {
            width: 300px;
            height: 200px;
            float: left;
            margin-right: 40px;
            background: lightGrey;
            }

            #div1 li{
                width: 150px;
                padding: 10px;
                border-bottom: 1px solid white;
                background: lightBlue;
                color: white;
            }

            #div2 {
            width: 300px;
            height: 200px;
            float: left;
            margin-right: 40px;
            background: lightGrey;
            }

            #div2 li{
                width: 150px;
                padding: 10px;
                border-bottom: 1px solid white;
                background: lightBlue;
                color: white;
            }
    </style>
    <script>

        function move()
        {
            //??? What goes here ???
        }

        function show1()
        {
            alert($('#div1').html());
        }

        function show2()
        {               
            alert($('#div2').html());
        }
    </script>

<body>
        <div id="div1">

            <li id="item1">Item 1</li>
            <li id="item2">Item 2</li>
            <li id="item3">Item 3</li>
        </div>

        <div id="div2">

            <li id="item4">Item 4</li>
            <li id="item5">Item 5</li>
            <li id="item6">Item 6</li>
        </div>

        <input type="button" value="Move" onClick="move()"/>
        <input type="button" value="Show Div1 Elements" onClick="show1()"/>
        <input type="button" value="Show Div2 Elements" onClick="show2()"/>
</body>
</html>

これを実現するには、move 関数に何を記述すればよいですか?
Show Div1 または Show Div2 ボタンをクリックすると、要素が正しく表示されます。
これらも追跡する必要があります。つまり、どの div にどのアイテムがあるかを見つけます。

何かアドバイス？

4

3 に答える 3

1

appendTo メソッドを使用して、このコードを試すことができます。

function move() {
    $('#item2').appendTo('#div2')
}
于 2013-07-22T12:08:24.067 に答える
-1 
 // From which you will get content     
 var a=document.getElementById('youritem').innerHTML;

 // Get all content from container then append content and generate new content
 var c=document.getElementById('#div2').innerHTML;
 var b=a+c;

 // Then assign new content to Your div
 document.getElementById('#div2').innerHTML=b;

 // --------- or you can use

 function move() {
   $('#item').appendTo('#yourdiv')
 }
于 2013-07-22T12:12:06.107 に答える