JQUERY - ensuring only one div ID of a particular class shows when user clicks its corresponding image and the rest are set to hide
i have 10 images in a flash carousel thats set up to trigger jquery commands through an XML document
ie:
<photo image="images/01.jpg" url="javascript:toggleDetail1()" target="_self">
<photo image="images/02.jpg" url="javascript:toggleDetail2()" target="_self">
etc...
when the user clicks an image i want to ensure that only开发者_StackOverflow社区 that particular image's corresponding div is shown and the other 9 are hidden.
i've given all 10 divs the class of "toggleitem" and every div has it's own ID ("detail1", "detail2", etc.) so now i need to write my jquery and im a little lost.
so far ive gotten to the point where when i click on an image in the carousel the div i want to show will show. BUT i dont really know what to do about getting the other divs in the 'toggleitem' class to hide at that point.
<script type="text/javascript">
function toggleDetail1() {
$('#bookdetail1').show();}
function toggleDetail2() {
$('#bookdetail2').show();}
etc...
do i need to use a .not() selector, an if statement or what? im baffled.
thanks in advance for any help on this
sorry shouldve included the html:
<div class="toggleitem" id="bookdetail1">
<span class="cover"><img src="images/details/1/cover-1.jpg"</span>
<span class="spread"><img src="images/details/1/spread-1.jpg"</span>
<span class="blurb">text text text text text.</span>
</div>
in case this will help any1 in the future karim told me to do this:
function toggleDetail1() {
$('.toggleitem').hide();
$('#bookdetail1').show(); }
This is how I'd do it:
<photo image="images/02.jpg" data-detail="bookdetail1">
<div class="toggleitem" id="bookdetail1">
<span class="cover"><img src="images/details/1/cover-1.jpg"</span>
<span class="spread"><img src="images/details/1/spread-1.jpg"</span>
<span class="blurb">text text text text text.</span>
</div>
Then run this for all the photo elements:
$("photo").on("click", function(){
var $this = $(this),
detail = $this.data("detail"),
$detail = $("#"+detail);
// If you want to toggle the show/hide just use .toggle()
if ($detail) {
$detail.toggle();
}
// If you want to execute additional when you toggle:
/*
if ($detail.is(":visible")) {
$detail.hide();
// do more stuff when it's hidden
} else {
$detail.show();
// do more stuff when it's shown
}
*/
});
精彩评论