如何使用jQuery选择器

Question

我有这样的HTML结构: -

<article id="a_post" class="a_post">
<div id="thumbnail">
<img id="shine" src="wp-content/themes/dabanggknight/images/play.png"/>
</div>
<div id="instant_video" class="instant_video">
<span class="close"></span>
    // Some content here
</div>
</article>    
<article id="a_post" class="a_post">
<div id="thumbnail">
<img id="shine" src="wp-content/themes/dabanggknight/images/play.png"/>
</div>
<div id="instant_video" class="instant_video">
<span class="close"></span>
    // Some content here
</div>
</article>

在上面的HTML中,<div id="instant_video" class="instant_video"> <span class="close"></span> // Some content here </div>有一个css display:none;.我想要做的就是当有人点击时 <img id="shine" src="wp-content/themes/dabanggknight/images/play.png"/>我想要滑动div,其id为instant_video,其显示在css中设置为none.

然后当有人点击关闭类的跨度时,它会再次淡出特定的div.

但是我遇到了jQuery选择器的一个严重问题,因为我真的很喜欢它.

我正在使用的代码在所有隐藏的div中滑动,ID为id,instant_video并且问题仍然存在.

我想要做的只是向下滑动包含我点击的图像的article标签内的div.

我目前使用的代码如下: -

jQuery(document).ready(function() {
    jQuery('img#shine').click(function() {
        jQuery('.instant_video').slideDown('fast')
    }); 
});
jQuery(document).ready(function() {
    jQuery('.close').click(function() {
        jQuery('.instant_video').fadeOut('slow')
    }); 
});

Answer 1

首先,不允许有任何给定的元素id.id属性必须在文档中是唯一的.

你的问题的解决方案是给你的img元素一个class属性而不是一个属性id,然后使用jQuery的遍历方法(closest and find在这种情况下)来获取相关的元素.

因此,假设您的img元素具有类shine,您可以这样做:

$(document).ready(function() {
    $('img.shine').click(function() {
        $(this).closest('article').find('.instant_video').slideDown('fast');
    });
    $('span.close').click(function() {
        $(this).closest('.instant_video').fadeOut('slow');
    });
});