jQuery `.is(":visible")` no funciona en Chrome
if ($("#makespan").is(":visible") == true) {
var make = $("#make").val();
}
else {
var make = $("#othermake").val();
}
Make:<span id=makespan><select id=make></select><span id=othermakebutton class=txtbutton>Other?</span></span><span id=othermakespan style="display: none;"><input type=text name=othermake id=othermake> - <span id=othermakecancel class=txtbutton>Cancel</span></span>
El código anterior se ejecuta sin problemas en Firefox, pero no parece funcionar en Chrome. En Chrome se muestra .is(":visible") = falseincluso cuando lo es true.
Estoy usando la siguiente versión de jQuery: jquery-1.4.3.min.js
Enlace jsFiddle: http://jsfiddle.net/WJU2r/4/
Parece que :visibleel selector de jQuery no funciona para algunos elementos en línea en Chrome. La solución es agregar un estilo de visualización, como "block"o "inline-block"hacer que funcione.
También tenga en cuenta que jQuery tiene una definición algo diferente de lo que es visible que muchos desarrolladores:
Los elementos se consideran visibles si consumen espacio en el documento.
Los elementos visibles tienen un ancho o alto mayor que cero.
En otras palabras, un elemento debe tener un ancho y un alto distintos de cero para consumir espacio y ser visible.
Los elementos con
visibility: hiddenoopacity: 0se consideran visibles, ya que aún consumen espacio en el diseño.
Por otro lado, incluso si está visibilityconfigurado en hiddeno la opacidad es cero, sigue siendo :visiblepara jQuery ya que consume espacio, lo que puede resultar confuso cuando el CSS dice explícitamente que su visibilidad está oculta.
Los elementos que no están en un documento se consideran ocultos; jQuery no tiene forma de saber si serán visibles cuando se agreguen a un documento, ya que depende de los estilos aplicables.
Todos los elementos de opción se consideran ocultos, independientemente de su estado seleccionado.
Durante las animaciones que ocultan un elemento, el elemento se considera visible hasta el final de la animación. Durante las animaciones para mostrar un elemento, el elemento se considera visible al inicio de la animación.
La manera más fácil de verlo es que si puedes ver el elemento en la pantalla, incluso si no puedes ver su contenido, es transparente, etc., es visible, es decir, ocupa espacio.
Limpié un poco su marcado y agregué un estilo de visualización ( es decir, configurar la visualización de elementos en "bloquear", etc. ), y esto funciona para mí:
VIOLÍN
Referencia oficial de API para:visible
A partir de jQuery 3, la definición de :visibleha cambiado ligeramente.
jQuery 3 modifica ligeramente el significado de
:visible(y por tanto de:hidden).
A partir de esta versión, se considerarán los elementos:visibleque tengan cuadros de diseño, incluidos los de ancho y/o alto cero. Por ejemplo,brel selector seleccionará elementos y elementos en línea sin contenido:visible.
No sé por qué tu código no funciona en Chrome, pero te sugiero que uses algunas soluciones:
$el.is(':visible') === $el.is(':not(:hidden)');
o
$el.is(':visible') === !$el.is(':hidden');
Si está seguro de que jQuery le da malos resultados en Chrome, puede confiar en la verificación de reglas CSS:
if($el.css('display') !== 'none') {
// i'm visible
}
Además, es posible que desee utilizar la última versión de jQuery porque es posible que tenga errores corregidos de la versión anterior.
Supongo que tiene algo que ver con una peculiaridad de nuestro HTML porque otros lugares de la misma página funcionan bien.
La única forma en que pude resolver este problema fue haciendo:
if($('#element_id').css('display') == 'none')
{
// Take element is hidden action
}
else
{
// Take element is visible action
}
