我对jQuery很新,我提出了影响下面HTML的脚本。该脚本运行完美,我已经知道我是否愿意。我遇到的问题 当我复制HTML和脚本时,一旦点击,只显示文档中的最后一个项目信息和项目图像。
我尝试了很多不同的方法 $(this).children()
但我似乎无法开始工作。任何帮助将不胜感激。
谢谢
的jQuery
$(document).ready(function() {
$('.apple').click(function() {
$('#darken').addClass('dark');
$('.project-info').delay('1000').slideDown('slow');
$('.project-images').delay('1000').fadeIn('slow');
});
});
$(document).ready(function() {
$('.close').click(function() {
$(".project-info, .project-images").fadeOut('slow');
});
});
HTML
<div class="apple">
<img src="http://mybroadband.co.za/photos/data/500/apple-logo.jpg"/>
</div>
<div class="project-info" style="display:none;">
<div class="project-title">
<h1>hello world</h1>
</div>
<div class="details">
<p>dkusdufhu suskueh sukh suefhuksdfnkuesnfukneukf nseuknfukenfuk nukefnuksn fukfuksukfnuksenf unseukfunfukfunufen u u u ef euhfuehfeufu g gfd gerjkg rjgrjg j js grg rgsg dkusdufhu suskueh sukh</p>
<div class="links">
<a href="#">link</a>
</div>
<div class="close"></div>
</div><!-- end of project info -->
</div>
<div class="project-images" style="display:none;">
<div class="-images">
<img src="http://cdn4.spiegel.de/images/image-499233-galleryV9-grcy.jpg" />
<img src="http://cdn4.spiegel.de/images/image-499233-galleryV9-grcy.jpg" />
</div>
<div class="close end"></div>
</div> <!-- Project Images -->
</div> <!-- # Darken -- >
答案 0 :(得分:1)
你快到了。孩子们不会在上面的例子中工作,因为上课与班级“苹果”有关。没有孩子。您需要将第一个结束标记移动到投资组合项目的底部,以便每个投资组合项目的html结构如下:
<!--PORTFOLIO ITEM-->
<div class="apple">
<!-- ICON GOES HERE-->
<img src="http://mybroadband.co.za/photos/data/500/apple-logo.jpg"/>
<!-- PROJECT INFO GOES HERE-->
<div class="project-info" style="display:none;">
</div>
<!-- PROJECT IMAGES GOES HERE-->
<div class="project-images" style="display:none;">
</div>
</div>
即。带课程的div&#39; project-info&#39;和&#39;项目图像&#39;在苹果里面#39; DIV。然后改变这个:
$('.project-info').delay('1000').slideDown('slow');
$('.project-images').delay('1000').fadeIn('slow');
到此:
$(this).children('.project-info').delay('1000').slideDown('slow');
$(this).children('.project-images',this).delay('1000').fadeIn('slow');
如果您已正确更新了自己的html,$(this)
将指向一个div元素,该元素确实包含带有类的子元素&#39; project-info&#39;和&#39;项目图像&#39;。这是一个更新的JSFiddle,可以为您提供所需的内容:http://jsfiddle.net/8k3Ms/1/