带有JavaScript onClick的随机图像

当我在我的网站上点击“门”时，我想在门框内显示6幅随机图像中的一幅。我已经把一个随机函数组合到一个数组中，但是在将这些图像放入门框时遇到了困难。我在CSS中创建了一些类来恰当地匹配图像，但是在阅读了其他一些文章之后，听起来好像我无法在javascript数组中调用CSS类

任何帮助都将不胜感激

这是我的密码笔：

这是我的密码：

HTML:

<script src="https://s.codepen.io/assets/libs/prefixfree.min.js"></script>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<p class="alert">click on the door and try to click on more than one door</p>
<div class="perspective" onclick="openDoor(this); randomImg1()">
  <div id = "image" class="image"></div>
  <div class="thumb">
  </div>
</div>

<div class="perspective" onclick="openDoor(this)">
  <div class="image"></div>
  <div class="thumb">
  </div>
</div>
<div class="perspective" onclick="openDoor(this)">
  <div class="image"></div>
  <div class="thumb">
  </div>
</div>
<div class="perspective" onclick="openDoor(this)">
  <div class="image"></div>
  <div class="thumb">
  </div>
</div>

---

你可以这样做。这是基于您的代码笔中的内容

function randomImg1() {
  var myImage1 = new Array();
  myImage1[0] = "https://68.media.tumblr.com/9768ea8b71fd67b7a90e7384c7756910/tumblr_inline_n1rtjwlsZb1so4q1u.jpg";
  myImage1[1] = "https://www.doyouyoga.com/wp-content/uploads/2017/01/dog-meme-10.jpg";
  myImage1[2] = "http://imworld.aufeminin.com/story/20140423/cat-meme-218141_w650.jpg";

  var classes = ['class1', 'class2', 'class3'];

  var random = Math.floor(Math.random() * myImage1.length);
  document.getElementById("image").attributes;
  document.getElementById("image").innerHTML =
    "<img src='" + myImage1[random] + "' class='" + classes[random] + "' alt='image'></img>" ;
}

函数随机img1（）{
var myImage1=新数组（）；
myImage1[0]=”https://68.media.tumblr.com/9768ea8b71fd67b7a90e7384c7756910/tumblr_inline_n1rtjwlsZb1so4q1u.jpg";
myImage1[1]=”https://www.doyouyoga.com/wp-content/uploads/2017/01/dog-meme-10.jpg";
myImage1[2]=”http://imworld.aufeminin.com/story/20140423/cat-meme-218141_w650.jpg";
变量类=['class1'，'class2'，'class3']；
var random=Math.floor（Math.random（）*myImage1.length）；
document.getElementById（“图像”）.attributes；
document.getElementById（“image”）.innerHTML=
"" ;
}

---

class1

将匹配第一张图像，

class2

匹配第二张图像，依此类推。使用

classes[random]

将确保它们匹配，无论随机数是多少。

JS函数将img元素的

src

属性设置为类的CSS选择器。如果你在背景图像中使用CSS类，那么你根本不需要img元素，只要使用一个span或div并设置它的类就可以了。这很好，但是，我只是让它在第一个div（或door）内完成。我已经用适当的信息更新了其他部门。你已经修好了吗？看起来所有的门都在工作。：）是的。因为我使用的是重复的代码（这不是规则#1，不要重复你的代码吗？）lol，所以它并不漂亮，而且可能编码非常糟糕。我认为可读的代码更重要！我在此处将重复的函数更改为单个函数：。希望有帮助！

body {
  background-color: #f0f0f0;
}

.container {
  margin: 0 auto;
  width: 90%;
}
.perspective {
  background: url("http://dc428.4shared.com/img/QWu4ziBq/s3/doorBorder.png");
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  display: inline;
  float: left;
  height: 274px;
  width: 147px;
  margin: 20px;
  margin-left: 0px;
  -webkit-perspective: 450;
  border-radius: 3px;
  box-sizing: border-box;
}

.thumb {
  background: url("http://dc428.4shared.com/img/-vayshJ-/s3/ClassDoor.png");
  background-repeat: no-repeat;
  background-position: center center;
  width: 147px;
  height: 274px;
  position: absolute;
  box-sizing: border-box;
  border-radius: 3px;
  box-shadow: 0 0 0 10px rgba(255, 255, 255, .0) inset;
  transition: 1s transform linear;
  transform-origin: left;
  cursor: pointer;
}

.thumbOpened {
  transform: rotateY(-90deg);
  transform-origin: 8px;
  transition: .5s linear;
}

.alert {
  padding: 8px 35px 8px 14px;
  margin-bottom: 20px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  background-color: #fcf8e3;
  border: 1px solid #fbeed5;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  color: #000;

  transform-origin: left;
  transform: rotateY(180deg);
  opacity: 0;
  animation-name: go;
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-delay: 0.5s;
  width: 350px;
}
@keyframes go {
  100% {
    opacity: 1;
    transform: rotateY(0deg);
  }
}

.image {
  background: url("https://www.petfinder.com/wp-content/uploads/2012/11/91615172-find-a-lump-on-cats-skin-632x475.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  display: inline;
  float: left;
  height: 235px;
  width: 110px;
  margin: 20px;
  margin-left: 1x;
  -webkit-perspective: 450;
  border-radius: 3px;
  box-sizing: border-box;
}

.image1 {
  background: url("https://www.petfinder.com/wp-content/uploads/2012/11/91615172-find-a-lump-on-cats-skin-632x475.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  display: inline;
  float: left;
  height: 235px;
  width: 110px;
  margin: 20px;
  margin-left: 1x;
  -webkit-perspective: 450;
  border-radius: 3px;
  box-sizing: border-box;
}

.image2 {
  background: url("http://cdn3-www.dogtime.com/assets/uploads/gallery/goldador-dog-breed-pictures/puppy-1.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  display: inline;
  float: left;
  height: 235px;
  width: 110px;
  margin: 20px;
  margin-left: 1x;
  -webkit-perspective: 450;
  border-radius: 3px;
  box-sizing: border-box;
}

.image3 {
  background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Bartagame_fcm.jpg/1200px-Bartagame_fcm.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  display: inline;
  float: left;
  height: 235px;
  width: 110px;
  margin: 20px;
  margin-left: 1x;
  -webkit-perspective: 450;
  border-radius: 3px;
  box-sizing: border-box;
}

.image4 {
  background: url("http://images.tritondigitalcms.com/6616/sites/395/2017/04/04103227/MONKEY.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  display: inline;
  float: left;
  height: 235px;
  width: 110px;
  margin: 20px;
  margin-left: 1x;
  -webkit-perspective: 450;
  border-radius: 3px;
  box-sizing: border-box;
}

.image5 {
  background: url("http://www.dupageforest.org/uploadedImages/Content/District_News/Nature_Stories/2016/Snapping%20Turtle%20Scott%20Plantier%20STP4793.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  display: inline;
  float: left;
  height: 235px;
  width: 110px;
  margin: 20px;
  margin-left: 1x;
  -webkit-perspective: 450;
  border-radius: 3px;
  box-sizing: border-box;
}

.image6 {
  background: url("https://s-media-cache-ak0.pinimg.com/736x/32/00/3b/32003bd128bebe99cb8c655a9c0f00f5--rabbit-baby-raising-rabbits.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  display: inline;
  float: left;
  height: 235px;
  width: 110px;
  margin: 20px;
  margin-left: 1x;
  -webkit-perspective: 450;
  border-radius: 3px;
  box-sizing: border-box;
}

.popUpImage{
position: absolute;
background: url("https://s-media-cache-ak0.pinimg.com/736x/32/00/3b/32003bd128bebe99cb8c655a9c0f00f5--rabbit-baby-raising-rabbits.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
z-index: 10000;
height: 250px;
width: 80px;

}

function randomImg1() {
  var myImage1 = new Array();
  myImage1[0] = "https://68.media.tumblr.com/9768ea8b71fd67b7a90e7384c7756910/tumblr_inline_n1rtjwlsZb1so4q1u.jpg";
  myImage1[1] = "https://www.doyouyoga.com/wp-content/uploads/2017/01/dog-meme-10.jpg";
  myImage1[2] = "http://imworld.aufeminin.com/story/20140423/cat-meme-218141_w650.jpg";

  var classes = ['class1', 'class2', 'class3'];

  var random = Math.floor(Math.random() * myImage1.length);
  document.getElementById("image").attributes;
  document.getElementById("image").innerHTML =
    "<img src='" + myImage1[random] + "' class='" + classes[random] + "' alt='image'></img>" ;
}