JQuery скрыть / показать элементы

Question

У меня есть 2 элемента cols3 и cols4.Если любой из них скрыт, то при нажатии кнопки этот элемент должен отображаться.Но если оба элемента скрыты, то при нажатии кнопки должен отображаться только элемент col3.

Я попытался использовать следующий код: но если оба скрыты, при нажатии кнопки отображаются оба, а не только cols3.

Любая помощь?

$('#plusexp').click(function() {
    if ($('.cols3:visible')) {
        if ($('.cols4:hidden')) {
            $('.cols4').show();
        }
    }
    if ($('.cols3:hidden')) {
        $('.cols3').show();
    }
});

Answer 1

Это идеальное исправление:

$('#plusexp').click(function() {
var f = $('.cols4').is(":hidden") ? "show" : "hide";
    if (f == 'hide' || f == 'Hide') {
       $('.cols3').show();
       $('.cols4').hide();
    }
    if (f == 'show' || f == 'Show') {
       $('.cols4').show();
       $('.cols3').hide();
    }
});

И Демо .Это простой код для редактирования: D.

Answer 2

Попробуйте это:

$('#plusexp').click(function() {
    if ($('.cols3').is(':hidden')) {
        $('.cols3').show();
    } else {
        if ($('.cols4').is(':hidden')) {
            $('.cols4').show();
        }
    }
});

Пример здесь: http://jsfiddle.net/jN7bc/

Answer 3

попробуйте этот код

$('#plusexp').click(function() {
    if ($('.cols4:hidden')) {
        $('.cols3').show();
    }
    else 
        $('.cols4').show();
    }        
});

Answer 4

Если вы проверяете , существует ли что-то , , используйте .length свойство .Свойство .length содержит количество элементов, соответствующих селектору.

Наблюдайте этого jsfiddle , чтобы увидеть, что без использования .length, вы всегда получите true независимо от того, есть ли какой-то элемент или нет.

РЕДАКТИРОВАТЬ:

После переосмысления этого (вашего описания, вашего кода и того, что вы действительно хотите сделать)достигните) мое мнение таково, что ваш код должен выглядеть следующим образом (см. this jsfiddle ):

$('#plusexp').click(function() {
    var $cols3 = $('.cols3');
    if ($cols3.is(':visible')){
        $('.cols4').show();
    };
    $cols3.show();
});

Причина этого:

• вы показываете cols3 в любом случае, потому что:

  • , если видны cols3 и cols4, вы показываете cols3,
  • , если отображается только один, выпоказать этот элемент (если это cols3, вы показываете его, но если это cols4, то отображение cols3 ничего не меняет),

• cols4 отображается только тогда, когда cols3 отображается перед нажатием (если оба невидимы, отображается только cols3),

• лучше кэшировать элементы (вв этом случае есть только одна переменная: $cols3),