jQuery: Does 'visible'检测最初隐藏的元素
jQuery: Does 'visible' detect elements that are initially hidden?
我有一些像这样的HTML标记:
<div class="item first">First Item</div>
<div class="item second">Second Item</div>
<div class="item third">Third Item</div>
<div class="item fourth">Fourth Item</div>
<div class="item fifth">Fifth Item</div>
<div class="item sixth">Sixth Item</div>
<div class="item seventh" style="display: none;">Seventh Item</div>
<div class="item eighth" style="display: none;">Eighth Item</div></div>
<div class="button"></div>
你会注意到前6个类是可见的,但后2个类有display: none样式。
这是因为如果用户选择这样做的话,我允许用户将两个条目替换为另外两个条目。下面是非常简化的伪代码,但我并不担心它,因为它可以工作——我只是想让您了解发生了什么:
$('.item').click(function(){
var thisClass = $(this).attr('class');
$('.' + thisClass).fadeOut();
$('.seventh').fadeIn();
});
现在我们开始讨论真正的问题了:
我总是在页面上有六个可见的项目(一些开始是隐藏的,一些开始是可见的)。我一直在做这样的事情:
$('.button').click(function(){
$('#id').find('.class:visible').each(function() {
//do something
})
});
然而,'each'永远不会找到隐藏在页面加载上的div,即使它们可能在按钮单击事件发生时可见。
我可以用计数器验证这一点。假设我打开了两个div并隐藏了两个div。我总共有6个可见div,所以我希望得到6个结果——但在这种特殊情况下,计数器的值永远不会超过4个,而且它永远不会返回给我最初隐藏div的类。
有什么我可以做得不同的想法吗?
tldr;$('#id').find('.class:visible')
只查找在页面加载时可见的div,并且忽略曾经隐藏但现在可见的div。
我认为你正在寻找的是一直显示6个项目,但也允许用户删除2个现有项目的2个隐藏项目,如果是这样的话
var counter = 0;
$('.item').one('click.limit', function() {
$(this).fadeOut();
$('.item:hidden:first').fadeIn();
if (++counter == 2) {
$('.item').off('click.limit')
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="item first">First Item</div>
<div class="item second">Second Item</div>
<div class="item third">Third Item</div>
<div class="item fourth">Fourth Item</div>
<div class="item fifth">Fifth Item</div>
<div class="item sixth">Sixth Item</div>
<div class="item seventh" style="display: none;">Seventh Item</div>
<div class="item eighth" style="display: none;">Eighth Item</div>
</div>
<div class="button"></div>
答案是....
我是个白痴。在最初隐藏的div中,类名中有一个空格,我没有注意到。
谢谢大家的帮助。
相关文章:
- 在单击任何位置时隐藏元素,而不检查每次DOM单击
- JavaScript-在手机上不工作的情况下,在外部单击时隐藏元素
- 随时隐藏元素
- 根据特定条件使用ng显示/ng隐藏来显示/隐藏元素
- 隐藏元素直到加载完成(ng斗篷不是我需要的)
- 在具有类的元素中隐藏元素
- javascript()onclick隐藏元素-dos'我不在firefox工作
- JQueryHide()在按钮中使用元素时不会隐藏元素
- 使用Javascript取消隐藏元素
- 如果鼠标离开父对象,则隐藏元素
- 如何在jquery ajax成功html响应中找到输入隐藏元素
- 基于事件在循环中隐藏元素
- 渐进式增强-不使用CSS隐藏元素
- 隐藏元素后更新滚动条
- jQuery没有隐藏元素
- jQuery隐藏元素在使用CSS显示时保持隐藏状态
- 如何使用javascript在区域外单击时隐藏元素
- 如何在加载网页时隐藏元素
- JS:隐藏元素上的事件侦听器
- HTML 显示/隐藏元素 JS 不起作用