Question

我正在使用jquery可见选择器来检查子元素是否可见。但令人惊讶的是。（＆＃34;可见＆＃34;）＆amp; .is（＆＃34;：visible＆＃34;）在使用css visibility：hidden属性时显示不同的结果。当我使用.is（＆＃39; visible＆＃39;）时，它正在警告false＆amp;使用.is（＆＃34;：visible＆＃34;）是警告的真实情况。但是在将css属性更改为display：none时，结果是一致的。这是代码。

HTML

<div id="parentEle">
    I have hidden span
    <span class="hiddenContent">
        I am hiddenContent
    </span>
</div>
<button type="button" onclick="_checkChild()">Check Child</button>

JS

function _checkChild(){
    var x= false;
    x =$("#parentEle").children(".hiddenContent").is(":visible");
    alert(x);
}

CSS

.hiddenContent{
   visibility:hidden
}

jsfiddle

你能帮忙理解这种差异吗？谢谢

Answer 1

#draggable { mix-blend-mode: color-dodge; }是一个jQuery special selector，用于检查元素是否可见，这些元素可能会不时变化。 .is(":visible");是一个标准选择器，用于检查元素是否为.is("visible");，并且无法告诉您有关其可见性的任何信息。

Answer 2

我会解释你.is（“：visible”）将检查该元素是否可见而.is（“visible”）将检查该元素是否为可见标记？

这意味着如果你在代码中写出这样的内容，它会给出真实的.is（“span”），因为这些文本是span标记。

Answer 3

.is("visible");会检查<visible>标记，检查元素可见性的正确语法是.is(":visible");，但即使使用visibility: hidden，元素也会被视为可见或opacity: 0，因为他们仍然在布局中使用空格（请参阅https://api.jquery.com/visible-selector/）。

获得.is(":visible")==false;的唯一方法是，如果元素不使用布局中的任何空格，那么当元素的高度和宽度为0或使用{{ 1}}（最后，与将元素的宽度和高度设置为0相同）

.is（＆＃34;可见＆＃34;）＆amp; .is（＆＃34;：visible＆＃34;）以不同的方式工作

3 个答案: