Using show hide individually on a series of images within one div
I'm a total noob to JQuery, and I've been tasked with finishing a project beyond my ability.
I've got a series of images each in it's own div with an associated hidden paragraph. I can use simple show/hide script to get the paragraph from the first div to show and hide properly, but once I add more image divs to the mix, the code either opens only the first image's <P> or all the <P>s at once.
CLearly, I need help integrating an EACH loop equivalent.
Here's the code:
<script>
$(document).ready(function(){
$("#showr").click(function () {
$("p:eq(0)").show("slow", function () {
// use callee so don't have to name the function
$(this).next().show("slow", arguments.callee);
});
});
$("#hidr").click(function () {
$("p").hide(2000);
});
});
</script>
<style>
div { padding:0; float:left; position:relative; top: 140px; text-align:center}
p { background:#FFFFFF; margin:3px; width:300px;
display:none; position:absolute; left:45%; top: -20px; text-align:left; z-index: 3000; }
.over { z-index: 3000; }
</style>
</head>
<body>
<div id="belt">
<div class="panel"><img src="images/1.jpg" name="sho开发者_C百科wr" id="showr">
<p><img id="hidr" class="over" src="images/1.jpg" width="300px" height="450px" alt="light1" /> <br />
<br />
Display item text description<br />
$price</p></div>
<div class="panel">
<img id="showr" src="images/2.jpg" width="200px" height="300px" alt="light1" />
<p><img id="hidr" class="over" src="images/1.jpg" width="300px" height="450px" alt="light1" /> <br />
<br />
Display item text description<br />
$price</p></div>
</div>
</body>
</html>
Try this:
<script>
$(document).ready(function(){
$("img.showr").click(function () {
$(this).next('p').show("slow");
});
$("img.hidr").click(function () {
$(this).parent('p').hide(2000);
});
});
</script>
<style>
div {
padding:0;
float:left;
position:relative;
top: 140px;
text-align:center
}
p {
background:#FFFFFF;
margin:3px;
width:300px;
display:none;
position:absolute;
left:45%;
top: -20px;
text-align:left;
z-index: 3000;
}
.over {
z-index: 3000;
}
</style>
</head><body>
<div id="belt">
<div class="panel">
<img src="images/1.jpg" name="showr" class="showr">
<p>
<img class="hidr over" src="images/1.jpg" width="300px" height="450px" alt="light1" /> <br />
<br />
Display item text description<br />
$price
</p>
</div>
<div class="panel">
<img class="showr" src="images/2.jpg" width="200px" height="300px" alt="light1" />
<p>
<img class="hidr over" src="images/1.jpg" width="300px" height="450px" alt="light1" /> <br />
<br />
Display item text description<br />
$price
</p>
</div>
</div>
</body>
</html>
NOTE: I've change some jQuery and markup too. Ask if you need any help, or it breaks :)
加载中,请稍侯......
精彩评论