Выберите элемент по ID и атрибуту CSS

Question

Через CSS я установил все divs в visibility :hidden. Нажимая элемент на панели навигации, я хочу, чтобы целевой div был установлен на visibility :visible. Это работает отлично, но я хочу, чтобы избежать его снова, если он уже виден.

Этот код не работает

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/

Так что мне пришлось завернуть его в Условный Заявление

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/

Почему это не работает другой способ?

Answer 1

От jQuery - :visible Selector

Элементы считаются видимыми, если они потребляют пространство в документе.
Элементы с видимостью: скрытые или непрозрачные: 0 считаются видимыми, так как они все еще потребляют пространство в макете.

Итак, хотя вы не можете видеть элементы, они не находятся в наборе :visible.

Что вы можете сделать вместо этого, использует display: none на элементах mainDiv. Тогда он будет считаться невидимым

.mainDiv { 
    display: none; 
} 

, а затем изменить Jquery только

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

См модифицирована JSFiddle

Answer 2

Запись:

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

Fiddle here.

Answer 3

Это работает, если вы измените:

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

To:

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