Question

我正在尝试通过单击图像来显示div。 div将包含图像或视频。我将点击几张图片并附上内容。使用我的实际JS，所有div都会在图像上显示时显示。我使用自定义字段输入我的图像和iframe，因此我的代码需要是动态的。我不知道如何解决它。另外在我的实际代码中，div在其外部点击时会消失，我想在点击它时添加一个文本链接来关闭它。

这是mu JS：

$(document).ready(function(){
  $(".mix").click(function(){
    $(".photos_overlay").toggle();
  });
});

我的Html：

<div class="mix photos" data-myorder="20140307">
<img src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/media_11.jpg" class="photo_medias">
</div>
<div class="photos_overlay" data-myorder="20140307">
<img src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/media_11.jpg" class="photo_medias_overlay">
</div>
<br>
<div class="mix videos" data-myorder="20140319">
<img src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/media_21.jpg" class="photo_medias">
</div>
<div class="photos_overlay" data-myorder="20140307">
<iframe width="706" height="364"  src="//www.youtube.com/embed/gg1RBO1Cj4Y" frameborder="0" allowfullscreen></iframe>
</div>

和我的CSS：

.photo_medias{width:233px;height:133px}
.container .mix.photos{width:233px;height:133px}
.container .mix.videos{width:233px;height:133px}
.photos_overlay{width:967px;height:384px;background-color:black;position:absolute;top:0;left:0;display:none}
.photo_medias_overlay{width:706px;height:364px}

这是JSfidlle在行动中看到它：http://jsfiddle.net/aaWLJ/12/

任何人都可以帮我这个吗？

非常感谢你的帮助，

Answer 1

我稍微修改了你的代码：
HTML

<br />
<div class="mix photos" data-myorder="20140307">
    <div class='closeFrame' style="display: none; position:absolute;top:0;">CloseMe</div>
    <img src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/media_11.jpg" class="photo_medias">
</div>

<div class="photos_overlay" data-myorder="20140307">
    <img src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/media_11.jpg" class="photo_medias_overlay">
</div>
<br>
<div class="mix videos" data-myorder="20140319">
    <div class='closeFrame' style="display: none; position:absolute;top:0;">CloseMe</div>
    <img src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/media_21.jpg" class="photo_medias">
</div>
<div class="photos_overlay" data-myorder="20140307">
    <iframe width="706" height="364"  src="//www.youtube.com/embed/gg1RBO1Cj4Y" frameborder="0" allowfullscreen></iframe>
</div>

正如您所看到的，我为两个叠加层添加了一个父div个元素，并为div CloseMe添加了一个此外，我已经更改了一些CSS（您可以将其更改为您想要的任何内容，我只想向您展示如何解决您的问题的主要想法）：

.photos_overlay{
    width:967px;
    height:384px;
    background-color:black;
    position:absolute;
    top:20px; /* I have changed top position just to show the div 'CloseMe'*/
    left:0;
    display:none
}

JavaScript代码

$(document).ready(function(){
  $(".mix").click(function(){
    ShowHide($(this));
  });
  $(".closeFrame").click(function(){
    ShowHide($(this));
  });

  function ShowHide(elem){
    var $mix = $(elem);
    $mix.children(".closeFrame").toggle();
    $mix.next(".photos_overlay").toggle();
  }
});

在图像jquery上叠加div

1 个答案: