jquery实现多个点击复制按钮

上一篇博客的升级版,哈哈,功能室实现了,但是代码写的比较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~~妈妈再也不应担心我掉坑里啦!


已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页