灯箱效应JS帮助

Question

我有以下代码：

<script type="text/javascript" >

$(document).ready(function(){
$(".img").click(function(){
var address= $(this).attr("src");
$("#popup").fadeIn("slow");
$("#lightbox").attr("src",address);
});
$("#close").click(function(){
$("#popup").fadeOut("slow");
});
});
    </script>

显然，在字符串$("# lightbox ").attr("src"，address )中；"src"，address是一个变量，它应该指向脚本在lightbox弹出窗口中显示与源地址相关联的图像。不过，这对我不起作用。我认为这可能是因为我在图像缩略图上有一个覆盖，但是从下面的代码中可以看到，覆盖位于图像类div中。有什么建议吗？

<div id="indexcontainer">

    <div class="col col-1">
    <div id="effect-1" class="effects clearfix">

<div class="img"><img src="images/photos/_DSC0048.jpg" alt="Symphony In Red -       robertlunaphotography.com" onload="MM_effectGrowShrink(this, 600, '0%', '100%', false, false, true)">
    <div class="overlay">
<h6>&nbsp;</h6>
<h6>&nbsp;</h6>
<h6>&nbsp;</h6>
    <h4>"Symphony in Red"</h4>
    </div>
</div>

    </div>

    <div id="effect-1" class="effects clearfix">

<div class="img"><img src="images/photos/_DSC0046alt.jpg" alt="&quot;Second Thoughts&quot;"  longdesc="robertlunaphotography.com">
    <div class="overlay">
<h6>&nbsp;</h6>
<h6>&nbsp;</h6>
<h6>&nbsp;</h6>
    <h4>"Second Thoughts'</h4>
    </div>
</div>
</div>
       <div id="effect-1" class="effects clearfix">

<div class="img"><img src="images/photos/LNA_4072.jpg" width="375" height="250" alt="&quot;The Angel of Oaks&quot;" longdesc="robertlunaphotography.com" onload="MM_effectGrowShrink(this, 400, '0%', '100%', false, false, true)"></a>
    <div class="overlay">
<h6>&nbsp;</h6>
<h6>&nbsp;</h6>
<h6>&nbsp;</h6>
    <h4>"The Angel of Oaks"</h4>
  </div>
</div>
</div>
              <div id="effect-1" class="effects clearfix">

<div class="img"><img src="images/photos/LUN_0378.jpg" width="514" height="250" alt="&quot;Table Rock Mountain&quot;" longdesc="robertlunaphotography.com">
    <div class="overlay">
<h6>&nbsp;</h6>
<h6>&nbsp;</h6>
<h6>&nbsp;</h6>
    <h4>"Table Rock Mountain"</h4>
  </div>
</div>
</div>
               <div id="effect-1" class="effects clearfix">

<div class="img"><img src="images/photos/_DSC0092_sm.jpg" width="376" height="250" alt="&quot;The  Stranger&quot;" longdesc="robertlunaphotography.com" onload="MM_effectGrowShrink(this, 600, '0%', '100%', false, false, true)">
    <div class="overlay">
<h6>&nbsp;</h6>
<h6>&nbsp;</h6>
<h6>&nbsp;</h6>
    <h4>"The Stranger"</h4>
  </div>
</div>
</div>
                  <div id="effect-1" class="effects clearfix">

<div class="img"><img src="images/photos/_DSC0073.jpg" width="250" height="376" alt="&quot;Jessica&quot;" longdesc="robertlunaphotography.com">
    <div class="overlay">
<h6>&nbsp;</h6>
<h6>&nbsp;</h6>
<h6>&nbsp;</h6>
    <h4>"Jessica"</h4>
  </div>
</div>
</div>
                     <div id="effect-1" class="effects clearfix">

<div class="img"><img src="images/photos/LNA_5203.jpg" width="375" height="250" alt="&quot;Lake Junaluska&quot;" longdesc="robertlunaphotography.com" onload="MM_effectGrowShrink(this, 600, '0%', '100%', false, false, true)">
    <div class="overlay">
<h6>&nbsp;</h6>
<h6>&nbsp;</h6>
<h6>&nbsp;</h6>
    <h4>"Lake Junaluska"</h4>
  </div>
</div>
</div>
                        <div id="effect-1" class="effects clearfix">

<div class="img"><img src="images/photos/_DSC0204copy.jpg" width="250" height="334"  alt="&quot;Brooke&quot;" longdesc="robertlunaphotography.com">
    <div class="overlay">
<h6>&nbsp;</h6>
<h6>&nbsp;</h6>
<h6>&nbsp;</h6>
    <h4>"Brooke"</h4>
</div>
</div>
</div>
</div>
</div>
<div id="popup">
<div id="center">
    <img id="lightbox" src="images/largeones/Symphony-in-Red-Robert-Luna-Photography.com.jpg">
    <img id="close" src="images/index/Close-button-icon-1005031249.png" alt="close" >
</div>  

Answer 1

单击处理程序是在类为<div>的img元素上定义的。因此，您试图从src元素而不是<img>元素中获取<img>属性：

$(".img").click(function(){
    // In this function, $(this) refers to <div class="img"> (not <img src="...">)
}

如果确实需要单击处理程序来处理<div>元素，请尝试如下：

$(".img").click(function(){
    var address= $(this).children().attr("src");
}

如果要对<img>元素使用单击处理程序，请尝试如下：

$(".img img").click(function(){
    var address= $(this).attr("src");
}