代码是否正确?给按钮使用one绑定事件吗?

代码是否正确?给按钮使用one绑定事件吗?

<!doctype html>

<html lang="en">


<head>

    <meta charset="UTF-8" />

    <title>Document</title>

</head>


<body>

    <button>添加</button>

    <ul>

        <li>111</li>

        <li>222</li>

        <li>333</li>

        <li>444</li>

    </ul>


    <script src="https://cdn.bootcss.com/zepto/1.0rc1/zepto.min.js"></script>

    <script>

        $(document).ready(function () {

            $('button').one('click',function(){

                $('ul').append('<li>555</li>');

            });

            $('ul')

            .on('mouseover','li',function(){

                $(this).css('background','red');

            })

            .on('mouseout','li',function(){

                $(this).css('background','#eee');

            });

        });

    </script>

</body>


</html>


正在回答

登陆购买课程后可参与讨论,去登陆

3回答

同学你好,题目中并没有要求实多次绑定,一次或者多次都是可以的。

如果想要实现添加多次,可以直接使用li长度进行添加,参考

http://img1.sycdn.imooc.com//climg/5ea651a4099452f006070246.jpg

点击的时候获取li的长度,然后和111相乘,再与li进行拼接显示。

自己测试下,祝学习愉快!

  • Aurora_Meteor 提问者 #1
    我尝试了一下,为什么每次点击按钮添加了一个li以后li的长度会自动改变呢?难道第一行的通过标签名获取li会自动的实时更新吗? 不然的话获取到的li集合应该是固定长度的吧,因为只获取了一次li,也就是一开始获取到的页面中4个li所以长度为4。可是执行的是按钮的点击,这个函数内也只是获取li的长度以及添加新的li并没有执行上面的获取li啊。
    2020-04-27 13:32:14
好帮手慕星星 2020-04-27 16:33:50

同学你好,document.getElement系列获取元素是动态的,长度会随着内容多少改变而改变,不需要重新获取元素,每次获取长度就好。

祝学习愉快!

好帮手慕星星 2020-04-27 09:45:11

同学你好,代码实现效果很棒!另外使用one绑定点击事件是可以的,没有问题。

祝学习愉快!

  • 提问者 Aurora_Meteor #1
    这道题的意思就是只添加一个吗?如果是要多次添加,每次添加的li里面是不同的内容:比如第一次点显示的是555第二次是666这样,那是不是得用一个变量a存储4,然后每次点击完按钮变量值++,在添加li的时候标签中间加上+a+a+a+?
    2020-04-27 09:48:55
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
3.WebAPP开发与小程序
  • 参与学习           人
  • 提交作业       622    份
  • 解答问题       6815    个

微信带火了小程序,也让前端工程师有了更多的展现机会,本阶段带你从移动基础知识的学习到webAPP开发,及小程序开发,让你PC端与移动端两端通吃。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师