问题描述:

I have this set up so that if you click on a christmas tree ball the image displays. The problem is that it shows both pictures as opposed to just one.I thought since I named the class with the hidden picture in the javascript it would only show one.

http://jsfiddle.net/0z0x9avj/

 <head>

<style>

<!-- set tree under all pictures-->

.tree {

position: absolute;

left: 0px;

top: 0px;

z-index: -1;

}

<!--styles for picture to show a white background behind the picture-->

#modal {

background: white;

position: fixed;

width: 50%;

top: 50%;

left: 50%;

margin: -15% 0 0 -15%;

/* Embiggen */

transform: scale(1); /* prefix me */

/* Hidden */

opacity: 0;

pointer-events: none;

}

<!--hide the picture-->

.album-pic-exit1,.album-pic-exit2,.album-pic-exit3,.album-pic-exit4 {

display: none;

}

.dialogIsOpen #page-wrap {

/* Blur and de-color */

webkit-filter: blur(5px) grayscale(50%);

/* Recede */

webkit-transform: scale(0.9);

}

.dialogIsOpen #modal {

/* Regular size and visible */

transform: scale(1); /* prefix me */

opacity: 1;

box-shadow: 0px 0px 800px rgba(0, 0, 0, 1);

/* Clickable */

pointer-events: auto;

}

#page-wrap, #modal {

transition: all 0.4s ease; /* prefix me */

}

/* position an empty link over the christmas bulb */

#box-link1 {

position: absolute;

left: 250px;

top: 66px;

width: 50px;

height: 50px;

background-color: transparent;

border: 1px solid yellow; /*what ever*/

}

#box-link2 {

position: absolute;

left: 230px;

top: 116px;

width: 50px;

height: 50px;

background-color: transparent;

border: 1px solid blue; /*what ever*/

}

</style>

<script>

!--1-->

<!-- This is where the script is to display the first picture -->

$(document).ready(function()

{

<!-- if someone click this empty link show the picture not we have a class to only show 1 picture not both-->

$("#box-link1").click(function(){

$(".album-pic-popup1").show().animate({height:"300"});

$("body").toggleClass("dialogIsOpen");

<!-- picture pops up with a class of album exit showing -->

});

$(".album-pic-exit1").click(function(){

$(".album-pic-exit1").hide().animate({display: none});

});

<!-- after second click hide picture -->

$(".album-pic-popup1").click(function(){

$("body").toggleClass("dialogIsOpen");

});

});

<!--2-->

$(document).ready(function()

{

$("#box-link2").click(function(){

$(".album-pic-popup2").show().animate({height:"300"});

$("body").toggleClass("dialogIsOpen");

});

$(".album-pic-exit2").click(function(){

$(".album-pic-exit2").hide().animate({display: none});

});

$(".album-pic-popup2").click(function(){

$("body").toggleClass("dialogIsOpen");

});

});

</script>

<body>

<body>

<div class="box1">

<a id="box-link1" href="#"></a>

<img class="tree" src="images\tree.jpg">

<div id="page-wrap">

<div id="wrapper">

<div id="img1">

<img width="10%" height="10%" class="album-pic-exit1" src="images\img1.jpg">

</div>

<div id="modal">

<div id="wrapper">

<img width="100%" height="100%" class="album-pic-popup1" src="images\img1.jpg">

</div>

</div>

</div>

</div>

</div>

<div class="box2">

<a id="box-link2" href="#"></a>

<div id="page-wrap">

<div id="wrapper">

<div id="img2">

<img width="20%" height="20%" class="album-pic-exit2" src="images\img2.jpg">

</div>

<div id="modal">

<div id="wrapper">

<img width="200%" height="200%" class="album-pic-popup2" src="images\img2.jpg">

</div>

</div>

</div>

</div>

</div>

</body>

网友答案:
  1. Do not use multiple of the same ID. IDs are unique.
  2. Close your <img> tags with />: <img src="yourfile" />.
  3. Try to use as few unique IDs as possible when using JS to navigate.
相关阅读:
Top