jquery实现多个点击复制按钮

最新推荐文章于 2023-06-27 11:13:49 发布

瞬间空白sky

最新推荐文章于 2023-06-27 11:13:49 发布

阅读量5.4k

点赞数 2

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/apple_01150525/article/details/54614304

版权

JavaScript 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

上一篇博客的升级版，哈哈，功能室实现了，但是代码写的比较low，小女子还处于菜鸟阶段，欢迎大神指点，不喜勿喷^_^。话不多说，先上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<input type="text" id = "url1" value = "http://www.baidu.com"><a href="javascript:(0)" id = "btn1">点我复制</a>
<input type="text" id = "url2" value = "http://www.jd.com"><a href="javascript:(0)" id = "btn2">点我复制</a>
<input type="text" id = "url3" value = "http://www.hshs.com"><a href="javascript:(0)" id = "btn3">点我复制</a>
<input type="text" id = "url4" value = "http://www.iii.com"><a href="javascript:(0)" id = "btn4">点我复制</a>
<script src = "js/jquery.js"></script>
<script type="text/javascript">
    var btn = [];
    var url = []
    var len = $("input").size();
    for (var i = 0; i < len; i++) {
        btn.push("#btn" + (i + 1));
        url.push("#url" + (i + 1));
        }
    console.log(btn);
    for(var j in btn){
        (function(data_j){
            $(btn[data_j]).bind("click", function () {
                $(url[data_j]).select();
                document.execCommand("Copy");
            });
        })(j);
    }


</script>
</body>
</html>

再来说一说遇到的坑吧，就是循环输出这里，一开始我是这么写的：

 for(var j in btn){
        $(btn[j]).bind("click", function () {
            $(url[j]).select();
            document.execCommand("Copy");
        });
    }

但是通过执行代码发现，无论点击那个按钮，复制的都是最后一个input框中的内容，原因和js的for循环作用域有关。由于 for 循环并不是一个函数体，所以for循环中定义的函数并不是立即执行。在JavaScript中，由for语句创建的变量i即使在for循环执行结束之后，也依然会存在于循环外部的执行环境中，所以，按照我之前的写法，当点击按钮的时候每次都执行的是最后一个方法。。这个问题的解决办法就是在for循环中增加一个匿名函数，把循环变量当做参数传进去。新技能get~~妈妈再也不应担心我掉坑里啦！

瞬间空白sky

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
4
评论
jquery实现多个点击复制按钮

上一篇博客的升级版，哈哈，功能室实现了，但是代码写的比较low，小女子还处于菜鸟阶段，欢迎大神指点，不喜勿喷^_^。话不多说，先上代码点我复制点我复制点我复制点我复制 var btn = []; var url = [] var len = $("input").size(); for (var i = 0; i < le
复制链接

扫一扫

专栏目录