关于JavaScript的问题。。。
 <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>动态创建HTML实践</title>
    <style type="text/css">
        .container{
            width:800px;
            margin:20px auto;
        }
        .all{
            width:300px;
            height: 450px;
            border:1px solid blue;
            float:left;
        }
        .selected{
            width: 300px;
            height: 450px;
            border:1px solid green;
            float:left;
            margin-left:20px;
        }
        .input{
            margin:10px;
            font-size: 1.2em;
        }
        h1{
            border-bottom:2px solid black;
        }
        ul{
            padding:2px;
        }
        ul li{
            list-style: none;
            margin-top:4px;
            margin-left:2px;
            border:1px solid brown;
            background-color: beige;
            font-size:2em;
            cursor: pointer;
        }

    </style>
    <script>
        function gettext()
        {   
            var gtext=document.getElementById("fruitInput").value;
            var l1ch=document.createElement("li");
            var l1=document.getElementById("allFruits");
            l1.appendChild(l1ch);
            var gtext1=document.createTextNode(gtext);
            l1ch.appendChild(gtext1);
        }
    window.onload=function()
    {
        getin();
        ret();
        function getin()
        {
            var list1=document.getElementById("allFruits");
            var ch1= document.getElementById("allFruits").getElementsByTagName("li");
            for(i=0;i<ch1.length;i++)
            {
                ch1[i].onclick = function()
                {
                var ul2ch=document.createElement("li");
                var ul2=document.getElementById("selectedFruits");
                ul2.appendChild(ul2ch);
                var get=this.innerHTML;
                var text=document.createTextNode(get);
                ul2ch.appendChild(text);
                list1.removeChild(this);
                }
         }
        }

        function ret()
        {
            var list2=document.getElementById("selectedFruits");
            var ch2= document.getElementById("selectedFruits").getElementsByTagName("li");
            for(i=0;i<ch2.length;i++)
            {
                ch2[i].onclick = function()
                {
                var a1=document.createElement("li");
                var a2=document.getElementById("allFruits");
                a2.appendChild(a1);
                var get=this.innerHTML;
                var text=document.createTextNode(get);
                alert(this.innerHTML);
                a1.appendChild(text);
                list2.removeChild(this);
                }
            }
        }



    }
 </script>
</head>
<body>
<div class="container">
    <div class="input">
        <label for="fruitInput" >输入新的水果:</label>
        <input id="fruitInput" type="text" />
        <input id="btnInput" type="button" value="确认输入" onclick="gettext()">
    </div>
    <div class="all">
        <h1>所有水果</h1>
        <ul id="allFruits">
            <li>苹果</li>
            <li>香蕉</li>
            <li>橘子</li>
            <li>葡萄</li>
            <li>柚子</li>
            <li>西瓜</li>
            <li>哈密瓜</li>
        </ul>
    </div>
    <div class="selected">
        <h1>我喜欢的水果</h1>
        <ul id="selectedFruits">
            <li>哈密瓜</li>
        </ul>
    </div>

</div>
</body>

代码的目的是点击左边的水果会让水果到右边去,然后点击右边的水果又会让它回来,但是试验发现点击左边的可以过去,但是点击右边的却回不来。从文本框输入的水果,点击之后也过不去。有没有大佬解释一下哪里错了,我感觉这个代码逻辑有问题,但是不知道具体哪里有问题。

4个回答

这一堆文本,真心看得难受。。。。。。。。。。。。。。。。。

a569634437
小小小小号丶 终于知道怎么提问了,现在改好了
接近 2 年之前 回复
a569634437
小小小小号丶 所以我还是删了这个问题吧
接近 2 年之前 回复
a569634437
小小小小号丶 我也很难受,发出来全是乱码
接近 2 年之前 回复

需要你自己下一个jQuery 代码贴上了 功能不知道 是不是你想要的

$(function(){
$("#allFruits").on("click","li",function(){
$("#selectedFruits").append("

"+$(this).text()+"");
$(this).remove();
});
$("#selectedFruits").on("click","li",function(){
$("#allFruits").append(""+$(this).text()+"");
$(this).remove();
});
})

因为你没有给新增的添加点击事件

  <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>动态创建HTML实践</title>
    <style type="text/css">
        .container{
            width:800px;
            margin:20px auto;
        }
        .all{
            width:300px;
            height: 450px;
            border:1px solid blue;
            float:left;
        }
        .selected{
            width: 300px;
            height: 450px;
            border:1px solid green;
            float:left;
            margin-left:20px;
        }
        .input{
            margin:10px;
            font-size: 1.2em;
        }
        h1{
            border-bottom:2px solid black;
        }
        ul{
            padding:2px;
        }
        ul li{
            list-style: none;
            margin-top:4px;
            margin-left:2px;
            border:1px solid brown;
            background-color: beige;
            font-size:2em;
            cursor: pointer;
        }

    </style>
    <script>
        function gettext()
        {   
            var gtext=document.getElementById("fruitInput").value;
            var l1ch=document.createElement("li");
            var l1=document.getElementById("allFruits");
            l1.appendChild(l1ch);
            var gtext1=document.createTextNode(gtext);
            l1ch.appendChild(gtext1);
                window.onload();//新增
        }
    window.onload=function()
    {
        getin();
        ret();
        function getin()
        {
            var list1=document.getElementById("allFruits");
            var ch1= document.getElementById("allFruits").getElementsByTagName("li");
            for(i=0;i<ch1.length;i++)
            {
                ch1[i].onclick = function()
                {
                var ul2ch=document.createElement("li");
                var ul2=document.getElementById("selectedFruits");
                ul2.appendChild(ul2ch);
                var get=this.innerHTML;
                var text=document.createTextNode(get);
                text.onclick=ret();//新增
                ul2ch.appendChild(text);
                list1.removeChild(this);
                }
         }
        }

        function ret()
        {
            var list2=document.getElementById("selectedFruits");
            var ch2= document.getElementById("selectedFruits").getElementsByTagName("li");
            for(i=0;i<ch2.length;i++)
            {
                ch2[i].onclick = function()
                {
                var a1=document.createElement("li");
                var a2=document.getElementById("allFruits");
                a2.appendChild(a1);
                var get=this.innerHTML;
                var text=document.createTextNode(get);
                alert(this.innerHTML);
                text.onclick=getin();//新增
                a1.appendChild(text);
                list2.removeChild(this);
                }
            }
        }



    }
 </script>
</head>
<body>
<div class="container">
    <div class="input">
        <label for="fruitInput" >输入新的水果:</label>
        <input id="fruitInput" type="text" />
        <input id="btnInput" type="button" value="确认输入" onclick="gettext()">
    </div>
    <div class="all">
        <h1>所有水果</h1>
        <ul id="allFruits">
            <li>苹果</li>
            <li>香蕉</li>
            <li>橘子</li>
            <li>葡萄</li>
            <li>柚子</li>
            <li>西瓜</li>
            <li>哈密瓜</li>
        </ul>
    </div>
    <div class="selected">
        <h1>我喜欢的水果</h1>
        <ul id="selectedFruits">
            <li>哈密瓜</li>
        </ul>
    </div>

</div>
</body>

点击后移动的方法实在初始化的时候赋予的,新加进去的和移动过去的没有

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!