Question

我有一个轮播，菜单区域中的每个锚点都链接到选定的幻灯片，当选择菜单中的锚点时，它会收到一个.active类。例如：链接1 =幻灯片1。当转盘到达最后一个滑块时，我尝试添加一个停止按钮而不是下一个按钮。

<nav class="meniu">
    <a href="#">Slide 1</a>
    <a href="#">Slide 2</a>
    <a href="#">Slide 3</a>
</nav>
<div id="slider">
    <ul>
        <li>Slide 1</li>
        <li>Slide 2</li>
        <li>Slide 3</li>
    </ul>
</div>

这是我尝试添加的脚本

if ($('.meniu a:last-child').hasClass('active')){
    //change button arrow to stop sign
}

这是小提琴 - http://jsfiddle.net/G7P46/1/

Answer 1

好的，这是你的问题。

当只使用来回按钮时，你会获得带有'active'类的元素，然后删除该类，然后将其添加到下一个兄弟中。这是问题所在。如果您只使用按钮，则实际上没有任何锚设置为活动状态。因此，查找活动的jquery选择器返回0.没有“next”因此它无法检查最后一个元素是否处于活动状态。

现在，如果你点击某个链接，那么使用这些按钮就可以了，因为至少有一个锚被设置为“活动”。

这是一个工作小提琴。

http://jsfiddle.net/G7P46/2/

我更新了文本功能

function goNext() {
    if (decount != counter) {
        $('#slider ul').animate({
            left: '-=' + $('#slider').width()
        }, 800, 'swing', function () {

        });
        if ($('.active').length == 0) {
            $('.meniu a:first-child').addClass('active');
        }
        $('.active').removeClass('active').next().addClass('active');
        if ($('.meniu a:last-child').hasClass('active')) {
            console.log('change button');
        }

        decount++;
        window.location.hash = decount;

    }
}

请注意，我添加了一个检查，以查看是否有任何锚点设置为活动状态。如果没有，我将第一个孩子设置为活动。我还添加了更改按钮if语句。它现在被击中了。

另外，我更新了点击事件

$('.meniu a').on('click', function () {
    var goTo = this.id * -$('#slider').width() + $('#slider').width();
    $('#slider ul').animate({
        left: goTo
    }, 800, 'swing', function () {});
    $('.active').removeClass('active');
    $(this).addClass('active');
    decount = this.id;
    window.location.hash = this.id;
    if ($('.meniu a:last-child').hasClass('active')) {
        console.log('change button');
    }


});

现在它检查那里的最后一个锚点。

编辑：我再次更新小提琴，让实际按钮改变功能

http://jsfiddle.net/G7P46/3/

Answer 2

试试这个：

if ($('.meniu a:last').hasClass('active')){
    //change button arrow to stop sign
}

我希望它会有所帮助。

选择：使用jquery的last-child

2 个答案: