如何使用jQuery选择工作

我有一个HTML的结构是这样的： -如何使用jQuery选择工作

<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;一个css。我想要做的就是当有人点击<img id="shine" src="wp-content/themes/dabanggknight/images/play.png"/>我想滑下div的id为instant_video，其显示在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') 
    }); 
});

来源

2012-08-28 Akash Kumar

首先使用'$'代替'jQuery' - 只需更短一点，然后使用'$（document）.ready（function（）...'每页只有一次 –

我的建议：不要使用相同的名称对于一个班级和身份证号码，永远不要给同一个ID超过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-28 10:01:21 mgraph

你的解释很好，你今天教给我一些新东西。 –

-1

ID必须是唯一的页面，你是一流的，即通过ID选择

jQuery('.instant_video')

选择像这

jQuery('#instant_video')

来源

2012-08-28 10:00:52 lukenz

你是对的，但你刚刚回答了问题的标题，而不是问题本身 –

的一个

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

的解决问题的方法就是给你img元素class属性而不是id，然后使用jQuery的遍历方法（closest andfind在这种情况下），以获得相关的元素。

因此，假设您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'); 
    }); 
});

来源

2012-08-28 10:01:53 lonesomeday

请记住，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-28 10:05:33 Alex

Tr有点像;

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

Here是一个工作现场演示。

来源

2012-08-28 10:08:02

如何使用jQuery选择工作

回答

相关问题