javascript - 关于JS的问题，新人求大神帮看看...-PHP中文网问答

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

javascript - 关于JS的问题，新人求大神帮看看...

黄舟 2017-04-10 17:14:48

[JavaScript讨论组]

380

我想要的效果是
点击添加时能向指定的UI里添加LI；
添加好LI后，点击LI里面的删除按钮。删除刚刚添加的这个LI。
下面是我的代码求大神帮看一下谢谢哈

黄舟

人生最曼妙的风景，竟是内心的淡定与从容！

全部回复(6)

巴扎黑2017-04-10 17:16:48 6楼

不太懂啊，不过for循环不应该放到onclick方法里边么？把html节点当做参数传进function。

赞 +0

添加回复

黄舟2017-04-10 17:16:48 5楼

window.onload = function() {
    var oinpu = document.getElementById('odin');
    var otext = document.getElementById('otex');
    var op1 = document.getElementById('op_1');
    var oul1 = op1.getElementsByTagName('ul')[0];
    var oa1 = oul1.getElementsByTagName('a');
    oinpu.onclick = function() {
        var oli1 = document.createElement('li');
        var oli2 = oul1.getElementsByTagName('li');
        oli1.innerHTML = otext.value + '<a href="javascript:;">删除</a>';
        //op1.appendChild(oli1);
        if (oli2.length > 0) {
            oul1.insertBefore(oli1, oli2[0]);
        } else {
            oul1.appendChild(oli1);
        }
        //点击删除时删除刚刚添加的LI
        for(var i=0; i < oa1.length; i++){
            (function(j) {
                oa1[j].onclick = function(){
                    alert('这是测式');
                    oul1.removeChild(this.parentNode);
                }
            })(i);
        };
    };
};

先放上根据题主代码改正之后可以实现需求的代码。
主要是两个问题。
第一：我们应该保证在添加了该元素之后再绑定点击事件，所以不能直接在最下面写上绑定事件，否则永远都是没有绑定成功的，因为oa1从运行就获取的是一个空的元素集合，然后相当于给一个空的元素集合进行绑定。
第二：老问题了，就是闭包，所以我使用

(function(j) {
     oa1[j].onclick = function(){
     alert('这是测式');
     oul1.removeChild(this.parentNode);
  }
})(i);

的方式把i传了进去，关于闭包的详细情况，题主可以百度或者google一下。

赞 +0

添加回复

ringa_lee2017-04-10 17:16:48 4楼

执行顺序的问题，你原本写的是[添加]与[遍历]是同时进行，所以添加的没有被遍历到，正确的方法应该是：在[添加]这个动作完成后，再执行遍历：

for(var i=0;i<oa1.length;i++){..}
这句放在
oinpu.onclick = function() {..}
里面即可

赞 +0

添加回复

PHP中文网2017-04-10 17:16:48 3楼

问题原因：
window.onload会在页面加载完成后执行，由于此时页面的ul标签里面没有<li></li>标签，所以
var oa1 = oul1.getElementsByTagName('a'); 中 oa1 = [];
代码顺序执行到

for(var i=0;i<oa1.length;i++)

时，根据 i < oa1.length 条件，for中的内容会执行0次。

解决办法有多个：
办法1，在oinpu.onclick中进行a标签onclick事件的绑定；
办法2，在添加a标签时，就指定a标签的onclick事件，即是在a标签属性中添加onclick，并且指定对应执行的方法。

赞 +0

添加回复

天蓬老师2017-04-10 17:16:48 2楼

建议使用事件代理的方法绑定，可以避免用到闭包

赞 +0

添加回复

PHP中文网2017-04-10 17:16:48 1楼

习惯用addEventListener，不过和你用onxx的方式本质是一样的。
记得用委托是最好的。

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <tilte></tilte>
        <script>
            window.addEventListener('load', function(){
                    var ul = document.getElementsByTagName('ul')[0]
                        ,text = document.getElementById('otex')
                    document.getElementById('odin').addEventListener('click', function (e) {
                        var li = document.createElement('li')
                        li.innerHTML =  text.value + '<a href="javascript:;">删除</a>'
                        ul.appendChild(li)
                    })
                    ul.addEventListener('click', function (e) {
                        if(e.target && e.target.nodeName == 'A')
                            ul.removeChild(e.target.parentNode)
                    })
                })
        </script>
        <style>
            #op_1 ul{
                  width: 300px;
                  height: 500px;
                  background-color: blueviolet;
                }
        </style>
    </head>
    <body>
        <input type="text" value="" id="otex" />
        <input type="button" value="添加" id="odin" />
        <p id="op_1">
            <ul></ul>
            <ul></ul>
            <ul></ul>
        </p>
    </body>
</html>

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>