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选择器的严重问题，因为我真的很喜欢它。

我正在使用的代码在id为instant_video的所有隐藏div中滑动，这就是问题仍然存在的地方。

我想要做的只是向下滑动包含我点击的图片的文章标签内的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 {{1在这种情况下）获取相关元素。

因此，假设您的find元素具有类img，您可以这样做：

shine

Answer 2

试试这个：

jQuery(document).ready(function($) {
   $('.a_post img').click(function() {
      $(this).closest('.a_post').find('.instant_video').slideDown('fast')
   });

   $('.close').click(function() {
      $(this).closest('.instant_video').fadeOut('slow')
   });
});

无需$(document).ready两次

id标签也必须始终是唯一的

因为您有很多instant_video，所以您应该使用closest来获取与您点击的img相关的那个

Answer 3

请注意，ID是唯一的。您不能在一个页面上拥有两个具有相同ID的元素！

然而，尝试这样的事情：将类分配给img #shine而不是id：

<img class="shine" src="wp-content/themes/dabanggknight/images/play.png"/>

然后使用此代码：

jQuery(function(){
    jQuery('img.shine').on('click', function(){
        jQuery(this).closest('.a_post').find('.instant_video').slideDown('fast');
    });

    jQuery('.close').on('click', function(){
        jQuery(this).closest('.a_post').find('.instant_video').fadeOut('slow');
    }); 
});

（或更短，试试这个：）

$(function(){
    $('img.shine').on('click', function(){
        $(this).closest('.a_post').find('.instant_video').slideDown('fast');
    });

    $('.close').on('click', function(){
        $(this).closest('.a_post').find('.instant_video').fadeOut('slow');
    }); 
});

Answer 4

尝试类似的事情;

$('#shine').click(function() {
    $(this).closest('.a_post').find('.instant_video').slideDown('fast');
});
$('.close').click(function() {
    $(this).closest('.instant_video').fadeOut('slow');
});

Here 是一个有效的现场演示。

Answer 5

ids对于页面必须是唯一的，您要按类选择，即

jQuery('.instant_video')

按ID选择就像这样

jQuery('#instant_video')

如何使用jQuery选择器

5 个答案: