javascript - 单击另一个 DIV 重新加载一个 DIV

Question

我有一个名为 masterdiv 的 div，在这个 div 中还有 3 个其他 div div1，div2, 和 div3,

这是这些 html 的 html:

<div id="masterdiv" class="masterdivclass">

        <div id="div1"><img class="div1class" src="image1.jpg" id="div1id" /></div>

        <div id="div2"><img class="div2class" src="image2.jpg" id="div2id" /></div>

        <div id="div3"><img class="div3class" src="image3.jpg" id="div3id" /></div>

</div>

我还有另一个div:

<div id=”reload”><img src="reload.png" width="200" height="70" onclick=loadDIV();></div>

我想做的是在点击 reload div 时重新加载 masterdiv div。隐藏然后显示 div 是不够的，因为我需要在单击 refresh div 时重新加载内容。我不想重新加载整个页面，只加载包含其他 3 个 div 的 masterdiv。但我不确定这是否可能。

我正在尝试使用这个 Javascript 函数来完成:

<script type="text/javascript">
       function loadDiv(){
       $("<div id="masterdiv" class="masterdivclass">

        <div id="div1"><img class="div1class" src="image1.jpg" id="div1id" /></div>

        <div id="div2"><img class="div2class" src="image2.jpg" id="div2id" /></div>

        <div id="div3"><img class="div3class" src="image3.jpg" id="div3id" /></div>

</div>").appendTo("body");
       }
    </script>

这行不通，我想也许我的做法不对？也许我在这里遗漏了一些非常简单的东西？非常感谢您对此提供的任何帮助，在此先感谢您!

更新

在重新考虑我的元素要求后，我需要更改部分问题，我现在需要随机化显示在 div 中的图像，并且每次 reload div 时都加载一个新的随机图像点击。我还需要删除当前在三个 div 中的每个类，然后将相同的类重新附加到 div(如果我不删除并重新附加类，则 div 只显示纯图像，而没有应用任何类/效果)他们，似乎每次我将图像加载到 div 中时我都需要重新加载类，以便成功应用类/效果)。

我有 5 张图片，我使用每个 div 的 id 标签将随机图片附加到每个 div。

首先，我将 5 个不同的图像分配给 5 个不同的 ID:

<script>
document.getElementById('sample1').src="images/00001.jpg";
document.getElementById('sample2').src="images/00002.jpg";
document.getElementById('sample3').src="images/00003.jpg";
document.getElementById('sample4').src="images/00004.jpg";
document.getElementById('sample5').src="images/00005.jpg";
</script> 

然后，当单击 reload div 时，我尝试使用以下 Javascript 将随机 ID(及其分配的图像)加载到 3 个 div 中的每一个:

<script>
$(function() {
    $('#reload').on('click',function(){
        $("#masterdiv").find("div[id^='div']").each(function(index){

//First, remove and reattach classes “div1class”, “div2class” and “div3class” 
//from “easyDIV”, “mediumDIV” and “hardDIV” respectively:
            $(“#easyDIV”).removeClass('div1class');
            $(“#easyDIV”).addClass('div1class');
            $(“#mediumDIV”).removeClass('div2class');
            $(“#mediumDIV”).addClass('div2class');
            $(“#hardDIV”).removeClass('div3class');
            $(“#hardDIV”).addClass('div3class');


//Get a random number between 1 and 5, then attach it to “sample”, 
//so that the result will be either “sample1”, “sample2”, “sample3”, “sample4” or “sample5”, 
//call this variable “variablesample”:
    var num = Math.floor(Math.random() * 5 + 1); 
       variablesample = "sample" +num;

//Attach this randomised id to all three divs using “variablesample”:
           jQuery(this).prev("easyDIV").attr("id",variablesample);
           jQuery(this).prev("mediumDIV").attr("id",variablesample);
           jQuery(this).prev("hardDIV").attr("id",variablesample);

        });
        var p = $("#masterdiv").parent();
        var el = $("#masterdiv").detach();
        p.append(el);
    });
});
</script> 

我试图让所有 3 个 div 都显示相同的随机图片(这就是为什么它们都共享变量“variablesample”)，并且每个 div 将重新加载自己的类/效果( div1class、div2class 和 div3class)但它不起作用。我不确定在 Javascript 函数中使用 jQuery 是否正确，或者我更新 div id 的语法是否不正确。

也许我解决这个问题的逻辑全错了？我真的很感激任何更多的帮助解决这个问题。再次提前致谢!

Answer 1

原问题经过多次编辑，所以这里是最新编辑的正确答案。回答问题； “如何使用随机图像，但在所有 3 和 3 类开/关切换上使用相同的图像”:

$(function() {
    var imageArray = [
        'https://via.placeholder.com/40x40',
        'https://via.placeholder.com/80x40',
        'https://via.placeholder.com/120x40',
        'https://via.placeholder.com/160x40',
        'https://via.placeholder.com/200x40'];
    reloadImages(imageArray);
    $('#reload').on('click',function(){
        $( "#masterdiv img[id^='div']" ).each(function(index){
            $(this).removeClass("div"+(index+1)+"class");
            $(this).fadeOut( "slow", function() {
                if(index==0) {
                    reloadImages(imageArray);
                }
                $(this).addClass("div"+(index+1)+"class");
                $(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, change 0 to i if you want different images in each div
        document.getElementById('div'+(i+1)+'id').src=array[0];
    }
}

.div1class {
    border:2px dashed #0F0;
}
.div2class {
    border:2px dashed yellow;
}
.div3class {
    border:2px dashed red;
}
#reload {
    background-color:blue;
    color:white;
    width:100px;
    height:30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id='reload'>Click here</div>

<div id="masterdiv" class="masterdivclass">
    <div id="div1">
        <img src="https://via.placeholder.com/20x40" class="div1class" id="div1id" />
    </div>
    <div id="div2">
        <img src="https://via.placeholder.com/20x40" class="div2class" id="div2id" />
    </div>
    <div id="div3">
        <img src="https://via.placeholder.com/20x40" class="div3class" id="div3id" />
    </div>
</div>