在每个 div JQuery 上绑定点击功能
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3664983/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Binding click function on each div JQuery
提问by Felix
I need to bind the click function on each div of this ordered list in order to make hide/show an image on each imgXX div, I'm newbie with JQuery
我需要在这个有序列表的每个 div 上绑定点击函数，以便在每个 imgXX div 上隐藏/显示一个图像，我是 JQuery 的新手
<ol id='selectable'>
<li class="ui-state-default">
<div id="img01" class="img">
<div id="star01" class="star">
<img src="../ima/star.png" height="30px"/>
</div>
</div>
</li>
<li class="ui-state-default">
<div id="img02" class="img">
<div id="star02" class="star">
<img src="../ima/star.png" height="30px"/>
</div>
</div>
</li>
</ol>
JQuery
查询
$('div').each(function(){
$(this).click(function(){
if($(this).find('img').is(':visible').length){
$(this).find('img').fadeOut(700);
}
else{
$(this).find('img').fadeIn(700);
}
});
});
采纳答案by Guffa
The ismethod returns a boolean. Use:
该is方法返回一个布尔值。用：
if($(this).find('img').is(':visible'))
or:
或者：
if($(this).find('img:visible').length)
回答by Sidharth Panwar
Try this:
尝试这个：
$('div').each(function(){
$(this).click(function(){
if($(this).find('img').is(':visible')){
$(this).find('img').fadeOut(700);
}
else{
$(this).find('img').fadeIn(700);
}
});
});
回答by Vikash
Unlike the other filtering and traversal methods, .is() does not create a new jQuery object. Instead, it allows us to test the contents of a jQuery object without modification.
与其他过滤和遍历方法不同，.is() 不会创建新的 jQuery 对象。相反，它允许我们不加修改地测试 jQuery 对象的内容。
- Source : http://api.jquery.com/is/
So, you can not use length on it as it returns a boolean value. Remove 'length' and it should work.
因此，您不能在其上使用 length，因为它返回一个布尔值。删除“长度”，它应该可以工作。
回答by Newtang
I don't think you necessarily need the each.
我认为您不一定需要每个。
$('div').click(function(){
var img = $(this).find('img');
if($(img).is(':visible')){
$(img).fadeOut(700);
}
});
回答by Dustin Laine
Not sure about the nesting of the divs, but since you are requesting to only fade the imgI am assuming that the .stardiv is visible and clickable. The function below is a bit more efficient as I am using childreninstead of findwhich is recursive. Other than the selectors this should work for you.
不确定 div 的嵌套，但由于您要求仅淡入淡出，因此img我假设.stardiv 可见且可点击。下面的函数效率更高一些，因为我正在使用它children而不是find递归。除了选择器，这应该适合你。
$('div.star').click(function() {
function () {
$(this).children('img').fadeOut(700);
},
function () {
$(this).children('img').fadeIn(700);
}
});
