Javascript 单击另一个DIV时重新加载一个DIV_Javascript_Jquery_Html_Css

Javascript 单击另一个DIV时重新加载一个DIV

javascript jquery html css

Javascript 单击另一个DIV时重新加载一个DIV,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个名为masterdiv的div，在这个div中还有3个divdiv1，div2和div3 这是这些html的html： <div id="masterdiv" class="masterdivclass"> <div id="div1"><img class="div1class" src="image1.jpg" id="div1id" /></div> <div id="div2"><

我有一个名为

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>

我试图做的是每当单击

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>

然后我尝试使用以下Javascript在单击reload
div时将随机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> 


$（函数（）{
$（'#reload'）。在（'单击'，函数（）上）{
$（“#masterdiv”）.find（“div[id^='div']”）。每个（函数（索引）{
//首先，移除并重新连接类“div1class”、“div2class”和“div3class”
//分别从“easyDIV”、“mediumDIV”和“hardDIV”开始：
$（“#easyDIV”）.removeClass（'div1class'）；
$（“#easyDIV”）.addClass（'div1class'）；
$（“#mediumDIV”）.removeClass（'div2class'）；
$（“#mediumDIV”）.addClass（'div2class'）；
$（“#hardDIV”）.removeClass（'div3class'）；
$（“#hardDIV”）.addClass（'div3class'）；
//获取一个介于1和5之间的随机数，然后将其附加到“样本”中，
//因此，结果将是“sample1”、“sample2”、“sample3”、“sample4”或“sample5”，
//将此变量称为“variablesample”：
var num=Math.floor（Math.random（）*5+1）；
variablesample=“sample”+num；
//使用“variablesample”将此随机id附加到所有三个DIV：
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、 追加（el）；
});
});

我试图让所有3个div显示相同的随机图片（这就是为什么它们都共享变量“variablesample”），每个div将重新加载自己的类/效果（div1class
，div2class
和div3class
），但它不起作用。我不确定在Javascript函数中使用jQuery是否正确，或者我更新div ID的语法是否不正确
也许我解决这个问题的逻辑都错了？我真的很感激在这个问题上有更多的帮助。再次提前感谢
 试试看：
function loadDiv(){

    $("#masterdiv").load(location.href + " #masterdiv");

}

下面是代码笔演示：
试试：
function loadDiv(){

    $("#masterdiv").load(location.href + " #masterdiv");

}

下面是代码笔演示：

若容器的内容并没有被动态更改，那个么重新加载它就并没有意义了appendTo
wiil appendDOM
在现有的DOM结构中，您将需要html（）
来替换容器中的内容。还要注意，您在这里输入了拼写错误onclick=loadDiv（）
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 id="reload"><img src="reload.png" width="200" height="70" onclick=loadDiv();></div>

function loadDiv() {
    $("#masterdiv").html('<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>');
}



JS:
<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 id="reload"><img src="reload.png" width="200" height="70" onclick=loadDiv();></div>

function loadDiv() {
    $("#masterdiv").html('<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>');
}

函数loadDiv（）{
$（“#masterdiv”）.html（'\
\
');
}

若容器的内容并没有被动态更改，那个么重新加载它就并没有意义了appendTo
wiil appendDOM
在现有的DOM结构中，您将需要html（）
来替换容器中的内容。还要注意，您在这里输入了拼写错误onclick=loadDiv（）
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 id="reload"><img src="reload.png" width="200" height="70" onclick=loadDiv();></div>

function loadDiv() {
    $("#masterdiv").html('<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>');
}



JS:
<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 id="reload"><img src="reload.png" width="200" height="70" onclick=loadDiv();></div>

function loadDiv() {
    $("#masterdiv").html('<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>');
}

函数loadDiv（）{
$（“#masterdiv”）.html（'\
\
');
}
换行符和未转义引号是函数无法工作的原因
function loadDiv(){
    $('#masterdiv').remove();
    $("<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");
}

函数loadDiv（）{
$（'#masterdiv'）。删除（）；
$（“”）。附件（“正文”）；
}
换行符和未转义引号是函数无法工作的原因
function loadDiv(){
    $('#masterdiv').remove();
    $("<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");
}

函数loadDiv（）{
$（'#masterdiv'）。删除（）；
$（“”）。附件（“正文”）；
}
为了子孙后代，我将把所有答案留给对原始问题的所有编辑。。我希望我们最终找到了正确的问题……？：）
第一个答案（使用.detach（）
来“重新加载”元素）：
第二个答案（随机课堂，如要求）：
第三个答案（随机图像，但所有3个和3类开关上的图像相同）：

$（函数（）{
var imageArray=[
'https://placehold.it/40x40',
'https://placehold.it/80x40',
'https://placehold.it/120x40',
'https://placehold.it/160x40',
'https://placehold.it/200x40'];
重新加载图像（imageArray）；
$（'#reload'）。在（'单击'，函数（）上）{
$（“#masterdiv img[id^='div']”）。每个（函数（索引）{
$（this.removeClass（“div”+（index+1）+“class”）；
$（this.fadeOut（“slow”，function（））{
如果（索引==0）{
重新加载图像（imageArray）；
}
$（this.addClass（“div”+（index+1）+“class”）；
$（this.fadeIn（）；
});
});
});
});
函数shuffleArray（数组）{
对于（var i=array.length-1；i>0；i--）{
var j=Math.floor（Math.random（）*（i+1））；
var-temp=数组[i]；
数组[i]=数组[j]；
数组[j]=温度；
}
返回数组；
}
函数重载图像（数组）{
沙狐耳环（阵列）；
为了（var i=0；i为了子孙后代，我将把我所有的答案留给对原始问题的所有编辑..我希望我们最终得出正确的问题..？：）
第一个答案（使用.detach（）
来“重新加载”元素）：<