0

I have a carousel and each anchor in the menu area is linked to selected slide and when the anchor in the menu is selected it receives a .active class. Ex: link 1 = slide 1. I tried to add a stop button instead of next when the carousel reaches the last slider. 

<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>

This is the script that i tried to add

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

Here is the fiddle - http://jsfiddle.net/G7P46/1/

4

2 回答 2

1

好的，这是你的问题。

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

现在，如果您单击一个链接，然后使用按钮，它可以工作，因为至少一个锚点已设置为“活动”。

这是一个工作小提琴。

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

我更新了 goext 函数

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/

于 2013-07-02T12:18:30.120 回答
-2

尝试这个 ：

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

我希望它会有所帮助。

于 2013-07-02T12:09:08.087 回答