gpt4 book ai didi

javascript - jQuery - 两次使用相同的 HTML 会使我的脚本不起作用

转载 作者:行者123 更新时间:2023-12-03 12:13:31 24 4
gpt4 key购买 nike

我对 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 -- >

最佳答案

你就快到了。子级在上面的示例中不起作用,因为类“apple”的 div 没有任何子级。您需要将第一个结束标签移至投资组合项目的底部,以便每个投资组合项目的 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>

即具有“project-info”和“project-images”类的 div 位于“apple”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 元素,该元素确实具有类“project-info”和“project-images”的子元素。这是一个更新的 JSFiddle ,它应该可以满足您的需求:http://jsfiddle.net/8k3Ms/1/

关于javascript - jQuery - 两次使用相同的 HTML 会使我的脚本不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24840323/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com