js小练习

最新推荐文章于 2024-03-14 10:40:25 发布

Lomon6

最新推荐文章于 2024-03-14 10:40:25 发布

阅读量163

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_43952245/article/details/99707102

版权

js 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

事件委托

根据数组中图片的数量动态生成按钮，点击相应的按钮出现相应的图片

方法1

<body>
    <div id="control">
    </div>
    <img src="" alt=""/>
    <script>
        var pictures = ['../images/cat.jpg','../images/cat2.jpg','../images/cat3.jpg','../images/cat4.jpg','../images/girl.jpg'];

        var control = document.getElementById('control');
        var img = document.getElementsByTagName('img')[0];
        img.src = pictures[0];
        pictures.forEach(function (src, index) {
            var btn = document.createElement('button');
            btn.innerText = `change${index}`;
            control.appendChild(btn);
            btn.onclick = function(){
                img.src = src;
            }
        })

    </script>
   
</body>

方法2

<body>
    <div id="control">
    </div>
    <img src="" alt=""/>
    <script>
        var pictures = ['../images/cat.jpg','../images/cat2.jpg','../images/cat3.jpg','../images/cat4.jpg','../images/girl.jpg'];

        var control = document.getElementById('control');
        var img = document.getElementsByTagName('img')[0];
        img.src = pictures[0];
        pictures.forEach(function (src, index) {
            var btn = document.createElement('button');
            btn.innerText = `change${index}`;
            control.appendChild(btn);
            //给按钮添加一个自定义属性
            btn.dataset.src = src;
        });
        //采用事件委托的方式
        control.onclick = function (e) {
            if(e.target.dataset.src){
                img.src = e.target.dataset.src;
            }
        }
    </script>
    <!--<script src="demon.js"></script>-->
</body>
``

Lomon6

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js小练习

事件委托根据数组中图片的数量动态生成按钮，点击相应的按钮出现相应的图片方法1<body> <div id="control"> </div> <img src="" alt=""/> <script> var pictures = ['../images/cat.jpg','../im...
复制链接

扫一扫

专栏目录