Seleccionar elemento por ID y atributo CSS

A través de CSS configuré todos los divs para visibility :hidden. Al hacer clic en el elemento en la barra de navegación, quiero que el div de destino se establezca en visibility :visible. Esto funciona bien, pero quiero evitar configurarlo nuevamente si ya está visible.

Este código no funciona

function showNewElement(actID) {
   ID = actID.substring(1, actID.length);
   $('.mainDiv:visible').css("visibility", "hidden");
   $("#" + ID + ':hidden').css("visibility", "visible").hide().fadeIn('fast');
}

http://jsfiddle.net/dEnx5/

Así que tuve que envolverlo en una declaración if

function showNewElement(actID) {
    var ID = actID.substring(1, actID.length);
    if ($("#" + ID).css("visibility") != "visible") {
        $('.mainDiv').css("visibility", "hidden");
        $("#" + ID).css("visibility", "visible").hide().fadeIn('fast');
    }
}

http://jsfiddle.net/qUe6k/4/

¿Por qué no funciona al revés?

preguntado el 02 de diciembre de 13 a las 08:12

3 Respuestas

Desde jQuery - :selector visible

Los elementos se consideran visibles si ocupan espacio en el documento.
Los elementos con visibilidad: ocultos u opacidad: 0 se consideran visibles, ya que aún consumen espacio en el diseño.

Entonces, aunque no puedes ver los elementos, no están en el :visible conjunto.

Lo que puedes hacer en su lugar, es usar display: none en mainDiv elementos. Entonces se considerará invisible. 

.mainDiv {
    display: none;
}

y luego cambie el jQuery a solo 

function showNewElement(actID) {
    ID = actID.substring(1, actID.length);
    $('.mainDiv:visible').hide();
    $("#" + ID + ':hidden').fadeIn();
}

Ver modificado JSFiddle

Respondido el 02 de diciembre de 13 a las 08:12

Escribir:

function showNewElement(actID) {
    ID = actID.substring(1, actID.length);
    if ($("#" + ID).css("visibility") == "hidden"){
        $(".mainDiv:visible").css("visibility", "hidden");
        $("#" + ID).css("visibility", "visible");
    }
}

Violín aquí.

Respondido el 02 de diciembre de 13 a las 08:12

De hecho, quería que funcionara el de 2 líneas porque, lógicamente, parece correcto, pero no funciona. Quiero entender por qué ;) - el nuez

Funciona si cambias:

$("#" + ID + ':hidden').css("visibility", "visible").hide().fadeIn('fast');

A:

$("#" + ID).css("visibility", "visible").hide().fadeIn('fast');

Respondido el 02 de diciembre de 13 a las 08:12

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.