1

我有一个这样的 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>有一个display:none;. 我想要做的就是当有人点击时， <img id="shine" src="wp-content/themes/dabanggknight/images/play.png"/>我想用 Instant_video 的 id 向下滑动 div，它的显示在 css 中设置为 none。

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

但是我对 jQuery 选择器有一个严重的问题，因为我真的很业余。

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

我要做的就是只向下滑动包含我单击的图像的文章标签内的 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')
    }); 
});
4

5 回答 5

5

首先，任何给定的元素都不允许有多个元素id。id属性在文档中必须是唯一的。

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

所以，假设你的img元素有 class 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');
    });
});
于 2012-08-28T10:01:53.143 回答
1

试试这个：

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你点击的相关的

于 2012-08-28T10:01:21.947 回答
1

请记住，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');
    }); 
});​
于 2012-08-28T10:05:33.967 回答
0

尝试类似的东西；

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

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

于 2012-08-28T10:08:02.930 回答
-1

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

jQuery('.instant_video')

按id选择是这样的

jQuery('#instant_video')
于 2012-08-28T10:00:52.777 回答