Страница перенаправления в зависимости от того, имеет ли последний элемент определенное значение атрибута CSS с помощью jQuery

Question

Мне нужно перенаправить страницу, когда ползунок изображения достигает последнего изображения (в идеале по истечении заданного времени).

У меня есть код ниже вроде работы, но он перенаправляет, как только второе изображение отображается. Может кто-нибудь помочь, пожалуйста?

if ($('#mainContent ul.introScreen li img.active:last').css('display', 'block')) {
    window.location.href = "/ibp/app.php";
} else {
    //Do nothing
}

Спасибо, ребята.

РЕДАКТИРОВАТЬ: Я думаю, что где-то есть проблема с моим кодом, кажется, циклически проходит только первое изображение. Мой код ниже. Есть идеи?

function slideSwitch() {
    var $active = $('#introScreen li img.active');
    if ($active.length == 0)
        $active = $('#introScreen li img:last');
    var $next = $active.next().length ? $active.next() : $('#introScreen li img:first');
    $active.addClass('last-active');
    $next.css({
        opacity: 0.0
    }).addClass('active').animate({
        opacity: 1.0
    }, 1000, function () {
        $active.removeClass('active lastActive');
    });
    if ($('#introScreen li img.active:last').is(':visible')) {
        setTimeout(function () {
            window.location.href = "/ibp/app.php";
        }, 1000);
        // 1 sec
    }
}
$(function () {
    setInterval("slideSwitch()", 5000);
});

РЕДАКТИРОВАТЬ: я пытаюсь другой подход с использованием плагина Cycle jQuery со следующим кодом:

HTML:

<div id="introScreen">
    <ul id="slides">
        <li><img src="images/screen01-placeholder.png" alt="Screen 01 Placeholder" /></li>
        <li><img src="images/screen01-placeholder.png" alt="Screen 01 Placeholder" /></li>
        <li><img src="images/screen01-placeholder.png" alt="Screen 01 Placeholder" /></li>
        <li><img src="images/screen01-placeholder.png" alt="Screen 01 Placeholder" /></li>
        <li><img src="images/screen01-placeholder.png" alt="Screen 01 Placeholder" /></li>
        <li><img src="images/screen01-placeholder.png" alt="Screen 01 Placeholder" /></li>
        <li><img src="images/screen01-placeholder.png" alt="Screen 01 Placeholder" /></li>
        <li><img src="images/screen01-placeholder.png" alt="Screen 01 Placeholder" /></li>
        <li><img src="images/screen01-placeholder.png" alt="Screen 01 Placeholder" /></li>
        <li><img src="images/screen01-placeholder.png" alt="Screen 01 Placeholder" /></li>
    </ul>
</div>

JQuery:

$("ul#slides").cycle({
    fx: 'fade',
    pause: 2
});
if ($('ul#slides li:last').is(':visible')) {
    setTimeout(function () {
        window.location.href = "/ibp/app.php";
    }, 1000);
    // 1 sec
}

Теперь изображения хорошо переходят друг в друга, но опять же теперь страница не перенаправляет? Есть идеи, ребята?

Answer 1

Используйте is(":visible"), чтобы проверить, является ли элемент видимым или нет:

if($('...:last').is(':visible')) {
...
}

Другой вариант:

if($('...:last:visible').length /* == 1 */) {
...
}

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

Редактировать 2

Плагин jQuery.cycle запускает различные события . Одним из них является событие after, которое срабатывает после отображения слайда. В рамках этого события вы можете проверить, был ли это последний слайд, и сделать все необходимое:

$("ul#slides").cycle({
    fx: 'fade',
    after: function() {
        if ($(this).next().length === 0) {
            alert("Place the redirection code here");
        }
    }
});

Демо здесь

Answer 2

.css(string, string) является всегда сеттером. Вы устанавливаете display последнего изображения на block и проверяете, имеет ли возвращаемое значение этой операции (которое всегда является самим объектом jQuery для связывания) значение true (что всегда будет).

Вам необходимо проверить .css('display') == 'block', или лучше .is(':visible').

Для задержки используйте setTimeout.

if($('#mainContent ul.introScreen li img.active:last').is(':visible')) {
    setTimeout(function() { 
        window.location.href = "/ibp/app.php";
    }, 1000); // 1 sec
}

О, и если вы действительно хотите «ничего не делать», вам вообще не нужен ваш блок else.

Answer 3

использовать is(':visible')

is (': visible') `или хотя бы сравнить:

  if($('#mainContent ul.introScreen li img.active:last').is(':visible')) {
        window.location.href = "/ibp/app.php";
    } else {
        //Do nothing
    }

или хотя бы сравнить:

if($('#mainContent ul.introScreen li img.active:last').css('display')=='block') {
    window.location.href = "/ibp/app.php";
} else {
    //Do nothing
}