javascript - 在单击单独的 DIV 时通过 Javascript 重新加载 DIV 的图像和类。

Question

我正在使用的代码太长而无法发布，所以我在这里做了一个 fiddle :http://jsfiddle.net/Emily92/5b72k225/

这段代码随机获取一张图片，并根据在包含图片的 div 中应用的类将其切割成多个部分。

当页面加载时，从数组中选择一个随机图像并将类应用到它，我想做的是创建一个单独的 div，单击它时将重新加载包含图像的 div。我正在寻找的结果是将图像替换为应用了类的新随机图像。

现在，我可以让新图像出现在 div 中的唯一方法是重新加载整个页面，理想情况下，这可以通过重新加载 div 而不是重新加载所有其他页面元素来实现。

到目前为止，我还不能做到这一点，但在这里收到了一些关于如何在单击 div 时重新加载图像和类的帮助，jsfiddle 中 Javascript 代码的第 980-1018 行是当前的尝试在实现这一点，但解决这个问题似乎要复杂得多，因为图像是由 Javascript 代码操作的，所以也许这也需要在选择新的随机图像的同时重新加载？

这是目前解决这个问题的尝试:

$(function() {
    var imageArray = [
    'http://www.webdesignhot.com/wp-content/uploads/2009/10/CatsVectorImage.jpg',
    'http://www.costume-works.com/images/halloween_cat_in_witch_hat.jpg',
    'http://onthewight.com/wp-content/2013/04/sooty-ryde.jpg'];
    reloadImages(imageArray);
    $('#reload').on('click',function(){
        $( "#masterdiv img[id^='div']" ).each(function(index){
            $(this).removeClass("jqPuzzle jqp-r"+(index+3)+"-c"+(index+3)+"-SCN");
            $(this).fadeOut( "slow", function() {
                if(index==0) {
                    reloadImages(imageArray);
                }
                $(this).addClass("jqPuzzle jqp-r"+(index+3)+"-c"+(index+3)+"-SCN");
                $(this).fadeIn();

            });
        });
    });
});


function shuffleArray(array) {
    for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
    return array;
}

function reloadImages(array){
    shuffleArray(array);
    for(var i=0;i<3;i++){
        // places the first image into all divs
        document.getElementById('div'+(i+1)+'id').src=array[0];
    }
}

我在 jsfiddle 的 html 部分写了更多关于这个问题的细节。我非常感谢任何解决此问题的建议，并感谢您提前提供的任何帮助!

Answer 1

插件读取图像的 src在页面加载之前，获取它们然后生成拼图。因此，您不能只更新图像，因为它们不再存在了。所以你必须清除 div在每个难度等级( easyDiv , mediumDiv , hardDiv )下，附加一个新的 <img>然后在每个 div 下调用/重新加载插件。更新代码:http://jsfiddle.net/5b72k225/6/

我所做的更改:

1. 分开旧reloadImages进入initImages和 reloadImages . initImages在开始时被调用，而 reloadImages在重新加载时被调用。
2. 创建了新函数 makePuzzle通过从 $(document).ready() 中取出插件的初始化 block ，所以 makePuzzle可以在重新加载新图像后调用。

新$(document).ready() block 现在初始化图像并将单击事件处理程序附加到按钮。单击时，div s 已清空，新 <img>插入 s 并调用插件。