jquery实现点击按钮随机改变页面中图片的src

HTML代码

<body>
    <div class="container">
        <ul class="gallery">
            <li><img src="images/0.jpg" alt=""></li>
            <li><img src="images/1.jpg" alt=""></li>
            <li><img src="images/2.jpg" alt=""></li>
        </ul>
        <button>单击</button>
    </div>
</body>

Javascript 代码，使用了jquery库

    $(function () {
    //模拟后台获得图片数据
    var picData={
        src:["images/0.jpg","images/1.jpg","images/2.jpg","images/3.jpg",
        "images/4.jpg","images/5.jpg","images/6.jpg","images/7.jpg","images/8.jpg"]
    };
    //数据图片src数组，包含原html图片数据
    var picArr=picData.src;
    //数据图片总数
    var picNum=picData.src.length;
    var $oLi=$(".gallery li");
    //新建html图片src地址存放数组
    var targetArr=[];
    //新建存放随机数数组
    var ranArr=[];
    var ranNum=Math.floor(Math.random()*picNum);
    $("button").click(function() {
        //如果初始数组不为空，则清空
        if(ranArr.length>0){
            ranArr.length=0;
        }
        //将html图片src存放到目标数组
        for (var i = 0; i < $oLi.size(); i++) {
            targetArr.push($oLi.find('img').eq(i).attr("src"));
        }
        //判断随机数对应的src在目标数组中是否存在，如果不存在返回-1，存在返回>-1的数
        var isExist=$.inArray(picArr[ranNum], targetArr);
        //根据li个数获取相应个数的随机数，并存放到ranArr数组中
        for(var j=0;j<$oLi.size();j++){
            while(isExist>-1||$.inArray(ranNum, ranArr)>-1){
                ranNum=Math.floor(Math.random()*picNum);
                isExist=$.inArray(picArr[ranNum], targetArr);
            }
            ranArr.push(ranNum);
            //更新随机数和判断
            ranNum=Math.floor(Math.random()*picNum);
            isExist=$.inArray(picArr[ranNum], targetArr);
        }
        //遍历li并且设置相应的img下的src属性
        $oLi.each(function(index, val) {
             $(this).find('img').attr('src', picArr[ranArr[index]]);
        });
    });
});

但是第三次单击按钮就出现浏览器不响应的情况，即卡死，只能退出浏览器（前两次单击可以实现相应功能）。不知问题出现在哪，求大神详细解答下。

写的有点繁琐，好多循环。即使是$.inArray，底层实现还是循环。其实你需要解决的问题就是 生成N个不重复的随机数，关于这个问题应该有很多巧妙的先例了，搜索下吧。

 $(function () {
    //模拟后台获得图片数据
    var picData={
        src:["images/0.jpg","images/1.jpg","images/2.jpg","images/3.jpg",
        "images/4.jpg","images/5.jpg","images/6.jpg","images/7.jpg","images/8.jpg"]
    };
    // li 
    var $oLi=$(".gallery li");    
    var ranArr=[];
    $("button").click(function() {
        // 存放打乱后的数组
        ranArr = picData.src.sort(function(a,b){ return Math.random() -0.5; });
        $oLi.each(function(idx){
             ranArr[idx] && $('img',this).attr('src', ranArr[idx] );
        })
    });   
});

https://www.zhihu.com/question/41642706

【热门文章】