оператор jQuery if для проверки видимости

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

$('#column-left form').hide();
    $('.show-search').click(function() {
        $('#column-left form').stop(true, true).slideToggle(300);
        if( $('#column-left form').css('display') == 'none' ) {
            $("#offers").show();
        } else {
            $('#offers').hide();
        }
    });

Он скрывает div, но не возвращается, когда я скрываю форму. Буду рад любой помощи :)

редактировать:

Хорошо, мне удалось добиться желаемого эффекта, написав это:

$('#column-left form').hide();
    $('.show-search').click(function() {
        if ($('#column-left form').is(":hidden")) {
            $('#column-left form').slideToggle(300);
            $('#offers').hide();
        } else {
            $('#column-left form').slideToggle(300);
            $("#offers").show();
        }
    });

Не знаю, правильно ли написано, но работает;) Всем спасибо за помощь!


if-statement hide jquery show visible
person Tomarz    schedule 23.12.2011    source источник

Ответы (5)


arrow_upward
121
arrow_downward

Вы можете использовать .is(':visible'), чтобы проверить, видно ли что-то, и .is(':hidden'), чтобы проверить обратное:

$('#offers').toggle(!$('#column-left form').is(':visible')); // or:
$('#offers').toggle($('#column-left form').is(':hidden'));

Ссылка:

person ThiefMaster    schedule 23.12.2011
comment
Это возвращает true, если элемент видим, или false, если это не так. Стоит отметить. ;) - person Purag; 23.12.2011
comment
чтобы проверить, подразумевает ли это, что он возвращает логическое значение;) - person ThiefMaster; 23.12.2011
comment
@Purmou:! $ ('# Column-left form'). Is (': visible') определенно вернет логическое значение, однако этот оператор заключен в переключатель, поэтому он должен достичь желаемого результата. - person Amit Rai Sharma; 23.12.2011
comment
Примечательно из документации jQuery: Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout. - person Frank Nocke; 31.03.2016

arrow_upward
5
arrow_downward

Да, вы можете использовать .is(':visible') в jquery. Но пока код работает в браузере сафари .is(':visible'), это не сработает.

Поэтому, пожалуйста, используйте приведенный ниже код

if( $(".example").offset().top > 0 )

Вышеупомянутая строка будет работать как с IE, так и с сафари.

person Baskar Madasamy    schedule 19.06.2014

arrow_upward
2
arrow_downward

пытаться

if ($('#column-left form:visible').length > 0) { ...
person kontur    schedule 23.12.2011
comment
Не будет работать, даже пустой объект jQuery оценивается как true в логическом контексте (!![] === true). Вы можете добавить .length, чтобы заставить его работать., - person ThiefMaster; 23.12.2011
comment
@ThiefMaster: Я отредактировал ответ kontur, теперь он правильный! - person NickGreen; 23.12.2011
comment
Ty, голос против удален. Я бы пропустил > 0, поскольку длина в любом случае никогда не будет отрицательной. - person ThiefMaster; 23.12.2011

arrow_upward
0
arrow_downward

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

$.expr.filters.visible($("#singleElementID")[0]);

Что делает .is, так это проверяет, находится ли набор элементов в другом наборе элементов. Таким образом, вы будете искать свой элемент во всем наборе видимых элементов на вашей странице. Наличие 100 элементов вполне нормально и может занять несколько миллисекунд для поиска в массиве видимых элементов. Если вы создаете веб-приложение, у вас, вероятно, их сотни, а возможно, и тысячи. Наше приложение иногда занимало 100 мс для $ ("# selector"). Is (": visible"), поскольку оно проверяло, был ли элемент в массиве из 5000 других элементов.

person markdon    schedule 27.07.2016

arrow_upward
0
arrow_downward

если видно.

$("#Element").is(':visible');

если он спрятан.

$("#Element").is(':hidden');
person Nalan Madheswaran    schedule 17.08.2017