Если 'X' div является видимым, 'Y' div скрыто.Если «X» Div скрыто, «Y» div является видимым

Question

Я создаю сайт, и у меня есть слайд-шоу.Слайд-шоу имеет подписи и индекс, который перекрывает всю страницу.Когда оверлей активирован, подписи должны исчезнуть.И когда оверлей деактивируется, либо нажав кнопку выхода, либо ссылку на миниатюру, либо ссылку на меню, подписи должны вернуться.

Это то, что у меня есть до сих пор

    if($('#indexpage').css('display') == 'none'){ 
    $('#imageinfo').css('visibility') == 'visible'} 
    else { 
    $('#imageinfo').hide('slow'); 
    }

Я не могу ради своей жизни понять, как заставить это работать.Любая помощь будет принята с благодарностью.

спасибо,

Answer 1

В вашем коде, который управляет отображением или скрытием того или иного элемента, вы должны просто использовать .toggle():

$("#indexpage,#imageinfo").toggle();

Тогда каждый раз, когда вызывается .toggle(), видимый будет скрыт, а скрытый - видимым.

Предполагается, что вы уже установили в css один показ, а другой скрытый по умолчанию. Итак, CSS вашей страницы должен содержать:

#indexpage {
    display: none;
}

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

$("#imageInfo").toggle(!$("#indexpage").is(":visible"));

Редактировать: Просто заметьте, есть несколько причин, по которым ваш пример не работает.

Во-первых, вы, похоже, пытаетесь использовать .hide() с .css("visibility"). Но .hide() устанавливает display элемента в none. Как только это установлено, значение visibility не будет иметь никакого эффекта. Следствием .hide() является .show(). Но иногда может быть предпочтительнее .toggle(), так как он включает в себя функциональность .hide() и .show(). Это особенно верно, когда вы хотите показать или скрыть элемент в зависимости от определенного условия. В этом случае передайте логическое значение .toggle(), указывающее, должен ли элемент быть видимым. Вы можете уменьшить свой код из этого:

if (checkSomeCondition()) {
    $("#myElement").show();
}
else {
    $("#myElement").hide();
}

Только на одну строку кода:

$("#myElement").toggle(checkSomeCondition());

Во-вторых, другая причина, по которой ваш код дает сбой, заключается в том, что вы оцениваете значение visibility, а не присваиваете значение видимости. Оператор == является оператором равенства, который сравнивает два значения и возвращает логическое значение. Чтобы присвоить значение, вам нужно использовать оператор присваивания (=):

var a = 1;
a == 2;  // returns false, a is unchanged
a = 2;   // now a is 2

Но вы не будете использовать оператор присваивания в этом случае, потому что вы не можете присвоить значение результату вызова функции. То есть someFunction() = 1 является недопустимым JavaScript. В jQuery для чтения значения используется один аргумент. Чтобы записать значение, вы передаете второй аргумент, указывающий новое значение:

$('#imageinfo').css('visibility', 'visible');

Это исправляет синтаксис, но из-за первой проблемы, описанной выше, это не решает вашу проблему - вам нужно установить display вместо visibility.

Answer 2

Если вам нравятся однолинейные решения, вы можете попробовать:

$('#y').css('display', $('#x').is(':visible') ? 'none' : 'block');

Answer 3

вы можете использовать selector.is (": visible") примерно так:

if ( $( "#x" ).is(":visible" ) ) {
    $( "#x" ).hide( "slow" );
    $( "#y" ).show( "slow" );
} else
    if ( $( "#y" ).is(":visible" ) ) {
        $( "#y" ).hide( "slow" );
        $( "#x" ).show( "slow" );
    }

Live демо

Answer 4

if($('#indexpage').css('display') == 'none')
$('#imageinfo').show('slow'); 
else
$('#imageinfo').hide('slow');

Answer 5

Возможно, вы захотите прочитать эту статью о различиях между скрытием, исчезновением и анимацией.Я просто упоминаю об этом, потому что, если что-то расположено относительно вашей страницы относительно элементов скрытия / показа, различия в этих методах могут действительно испортить макет.

http://www.catchmyfame.com/2010/08/31/jquery-hide-vs-fadeout-vs-animate/

Так каквы собираетесь использовать это в ряде различных сценариев, я бы построил 2 функции, которые вы можете вызывать.

HideOverlay, который удаляет наложение и делает индекс видимым.

ShowOverlay,который удаляет индекс и делает наложение видимым.

Внутри них вы можете иметь переключатели.Если вы скрываете индекс отдельно от наложения в других сценариях в вашем скрипте, создайте другую функцию и вызовите ее из hideOverlay / showOverlay.

(Другие, вероятно, могли бы предложить создать единственную функцию для этого наложения, скрывая / показывая, передавая переменную true / false, но мне нравится сохранять ее простую, пока я не узнаю, что происходит, и затем улучшить ее, когда я полностьюпонимаю как это работает)

Answer 6

Учитывая ваше объяснение, вторая строка вашего кода:

$('#imageinfo').css('visibility') == 'visible'

, кажется, пытается установить свойство 'visibility' CSS, но на самом деле он сравнивает текущее значение, связанное с этим значением, со строкой 'visible', и результат этого сравнения не используется ни для чего , Даже если вы замените оператор сравнения на равенство == на оператор присваивания =, он все равно будет неправильным, поскольку не имеет смысла пытаться присвоить результат из этой функции равным строке. Правильный синтаксис изменить свойство выглядит следующим образом:

$('#imageinfo').css('visibility', 'visible');

Но вы также можете использовать .show() как противоположность .hide(). Итак:

if($('#indexpage').css('display') == 'none'){
   $('#imageinfo').show('slow');
} else {
   $('#imageinfo').hide('slow');
}

Что касается соответствия с любым другим вашим кодом, я сначала должен увидеть ваш другой код, в частности, как вы настроили свои обработчики событий.

Answer 7

Предполагая, что visibility является вашим Cssclass, попробуйте

  $('#imageinfo').addClass('visibility').show('fast');