使用jQuery根据最后一个元素是否具有特定的CSS属性值重定向页面

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);
});

编辑：我正在尝试一种不同的方法，使用CyclejQuery插件，代码如下：

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

使用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
}

Answer 3

.css(string, string)总是一个setter。您将最后一个图像的display设置为block，并检查该操作的返回值（对于链接，它始终是jQuery对象本身）是否计算为true（它将始终计算为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块。