jQuery hide/show elements

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() { 
    if ($('.cols3').is(':hidden')) { 
     $('.cols3').show(); 
    } else { 
     if ($('.cols4').is(':hidden')) { 
      $('.cols4').show(); 
     } 
    } 
}); 

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

Answer 2

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

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

EDIT:

После переосмысления это (ваше описание, ваш код и то, что вы действительно хотите достичь) мое мнение таково, что ваш код должен выглядеть следующим образом (см 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),

Answer 3

попробовать этот код

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

Answer 4

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

$('#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(); 
    } 
}); 

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