[英]onclick random div background-images
I can't figure out how to change 4 divs with the same background-image to another random image by clicking on either on of the div backgrounds.我不知道如何通过单击任何一个 div 背景将具有相同背景图像的 4 个 div 更改为另一个随机图像。 In my script only one image changes.在我的脚本中,只有一张图像发生了变化。
I have tried with document getElementByClassName and changed the ID to class but that did not work at all.我尝试使用文档 getElementByClassName 并将 ID 更改为 class 但这根本不起作用。 I tried with multiple IDs eg box1-random1, box2-random2 and added that in js but it did not work neither...我尝试了多个 ID,例如 box1-random1、box2-random2 并在 js 中添加了它,但它也不起作用......
<div class="wrapper" id="my-button">
<div class="box1" id="random"></div>
<div class="box2" ></div>
<div class="box3" ></div>
<div class="box4" ></div>
</div>
.box1 {
background-position: 0% 100%;
}
.box3 {
background-position: 0% 100%;
}
.box2 {
background-position: 100% 0%;
}
.box4 {
background-position: 100% 0%;
}
.box1, .box2, .box3, .box4 {
background-size: cover;
background-repeat: no-repeat;
background-image: url("http://lorempixel.com/800/800/cats/6");
}
var myData = {
1: {
imageUrl:"http://lorempixel.com/800/800/cats/4",
text: "This is the text for image 1"
},
2: {
imageUrl: "http://lorempixel.com/800/800/cats/4",
text: "This is the text for image 2"
},
3: {
imageUrl: "http://lorempixel.com/800/800/cats/4",
text: "This is the text for image 3"
},
4: {
imageUrl: "http://lorempixel.com/800/800/cats/4",
text: "This is the text for image 4"
},
5: {
imageUrl: "http://lorempixel.com/800/800/cats/5",
text: "This is the text for image 5"
},
6: {
imageUrl: "http://lorempixel.com/800/800/cats/6",
text: "This is the text for image 6"
},
7: {
imageUrl: "http://lorempixel.com/800/800/cats/7",
text: "This is the text for image 7"
},
8: {
imageUrl: "http://lorempixel.com/800/800/cats/8",
text: "This is the text for image 8"
},
9: {
imageUrl: "http://lorempixel.com/800/800/cats/9",
text: "This is the text for image 9"
},
10: {
imageUrl: "http://lorempixel.com/800/800/cats/10",
text: "This is the text for image 10"
}
};
function changeImage(){
var randomNumber = Math.floor((Math.random() * 10) + 1);
document.getElementById("random").style.background = "url('"+myData[randomNumber].imageUrl+"')";
document.getElementById("text").innerHTML = myData[randomNumber].text;
}
document.getElementById("my-button").addEventListener("click",changeImage);
` `
change your function like this:像这样更改您的 function :
function changeImage(){
var divs = document.querySelectorAll(".wrapper > div");
var randomNumber = Math.floor((Math.random() * 10) + 1);
for(var i=0; i<divs.length; i++){
divs[i].style.background = "url('"+myData[randomNumber].imageUrl+"')";
divs[i].innerHTML = myData[randomNumber].text;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.