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

Question

我正在使用的代码太长无法发布，所以我在这里做了一个小提琴：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，获取它们然后生成拼图。因此，您不能只更新图像，因为它们不再存在。所以你必须清除每个难度等级下的divs (easyDiv,mediumDiv,hardDiv)，在每个 div 下附加一个新的<img>，然后调用/重新加载插件。更新代码：http://jsfiddle.net/5b72k225/6/

我所做的更改：

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

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