使用 Jquery 显示三个中的一个随机 div

Question

我有一个包含图像和文本的三个 div (div="frames") 的列表。每次页面加载时，我都需要随机显示其中一个。这是我开始的代码：

<script>
var random = Math.floor(Math.random() * $('.frames').length);
Math.floor(Math.random() * $('.frames').length);
$('.frames').hide().eq(random).show();
</script>

<div class="frames">
<div class="frame1">
<h1>HEADER</h1>
<p>
PARAGRAPH
</p>
<a href="index.php?page=everstock-program"><img class="button1" src="images/learn-more-about-everstock.png" alt="Learn more about Everstock&trade;" /></a>
<p class="testimonial">
TESTIMONIAL
</p>
</div><!--frame1-->
</div>
<div class="frames">
<div class="frame2">
<h1>HEADER</h1>
<p>
PARAGRAPH
</p>
<a href="index.php?page=electrical-safety-training"><img class="button2" src="images/learn-more-about-safety.png" alt="Learn more about safety" /></a>
<p class="testimonial">
TESTIMONIAL
</p>
</div><!--frame2-->
</div>
<div class="frames">
<div class="frame3">
<h1>HEADER</h1>
<p>
PARAGRAPH
</p>
<a href="index.php?page=accu-inventory"><img class="button3" src="images/learn-more-about-accu-inventory.png" alt="Learn more about Accu-Inventory&trade;" /></a>
<p class="testimonial">
TESTIMONIAL
</p>
</div><!--frame3-->
</div><!--frames-->

所有这些都将以 display:none 开头，我想随机取其中一个 div 并将它们设置为 display:block。任何指针将不胜感激。我不擅长 jquery 编码。

CSS=

.frames{
position: relative;
top: 0;
left: 11px;
margin: 0;
padding: 0;
width: 908px;
height: 373px;
z-index: 10;
}

.frames .frame1{
background: transparent url("http://royalelectric.com/blog/wp-content/uploads/2014/07/frame11.jpg") no-repeat top left;
width: 906px;
height: 373px;
margin: 0;
padding: 0;
}

.frames .frame1 h1{
color: #151b65;
margin: 35px 0  5px 25px;
font-weight: normal;
font-size: 30px;
width: 350px;
line-height: 35px;
}

.frames .frame1 p{
width: 500px;
margin-left: 25px;
font-size: 14px;
color: #151b65;
}

.frames .frame1 .button1{
margin: 0 0 0 20px;
}

.frames .frame1 .testimonial{
color: #151b65;
font-style: italic;
width: 400px;
margin: 0 0 0 25px;
}

.frames .frame2{
background: transparent url("http://royalelectric.com/blog/wp-content/uploads/2014/07/frame21.jpg") no-repeat top left;
width: 906px;
height: 373px;
margin: 0;
padding: 0;
}

.frames .frame2 h1{
color: #151b65;
margin: 15px 0  5px 425px;
font-weight: normal;
font-size: 30px;
width: 450px;
line-height: 35px;
text-align: right;
}

.frames .frame2 p{
width: 500px;
margin: 5px 0 5px 375px;
font-size: 14px;
text-align: right;
color: #151b65;
}

.frames .frame2 .button2{
margin: 0 0 0 665px;
}

.frames .frame2 .testimonial{
color: #151b65;
font-style: italic;
width: 400px;
margin: 0 0 0 475px;
text-align: right;
}

.frames .frame3{
background: transparent url("http://royalelectric.com/blog/wp-content/uploads/2014/07/frame31.jpg") no-repeat top left;
width: 906px;
height: 373px;
margin: 0;
padding: 0;
}

.frames .frame3 h1{
color: #151b65;
margin: 15px 0  5px 25px;
font-weight: normal;
font-size: 30px;
width: 450px;
line-height: 35px;
}

.frames .frame3 p{
width: 525px;
margin-left: 25px;
font-size: 14px;
color: #151b65;
}

.frames .frame3 .button3{
margin: 0 0 0 20px;
}

.frames .frame3 .testimonial{
color: #151b65;
font-style: italic;
width: 400px;
margin: 0 0 0 25px;
}

#frame_nav{
position: relative;
margin: -35px 0 0 408px;
z-index: 500;
height: 30px;
width: 90px;
}

#frame_nav ul{
list-style: none;
margin: 0;
padding: 0;
}

#frame_nav li{
margin: 0;
padding: 0;
float: left;
}

谢谢。

Answer 1

您需要将代码放在页面末尾或将其包装在document ready call 中。实际上，您正在尝试在尚不存在的元素上执行代码。