0

我要做的是简单的 jquery 向导，我有 4 个步骤，按钮上一个和下一个。根据你在哪一步，当你点击下一步时，线应该用金色填充，圆圈应该在那之后也填充。所以如果你在第 2 步，点击下一步，你会从第 2 圈到第 2 圈填充线3. 以此类推……我设法用 5 个函数来完成，每个元素一个，但我确信它可以用一个更简单的函数来完成。这是代码：

$(document).ready(function () {
    $('.next').click(function () {
        if ($('.sirina').parent().prev('.krug').hasClass('stiglo')) {
            console.log(this);
            $('.sirina').animate({
                width: '150px'
            }, 1000, function () {
                $(this).parent().next('.krug').animate({
                    borderTopColor: '#E3B009',
                    borderBottomColor: '#E3B009',
                    borderLeftColor: '#E3B009',
                    borderRightColor: '#E3B009'
                }, 1000).addClass('stiglo');
            });
        }
    });
});

http://jsfiddle.net/Frenki/LbssU/3/

现在，问题就在console.log 之后，我是所有'.sirina' 类的动画，而不是之前的div 具有'stiglo' 类的那个，它是函数'if' 内的元素。但是，如果我使用“this”，那么它指的是“下一个”类，而不是 if 函数中的那个。

我希望所有这些都有意义:)

4

3 回答 3

3

此回调中的范围是指animate()执行的元素：

        $('.sirina').animate({
            width: '150px'
        }, 1000, function () {
            // $(this) is $('.sirina') element the callback is executed on
            $(this).parent().next('.krug').animate({
                borderTopColor: '#E3B009',
                borderBottomColor: '#E3B009',
                borderLeftColor: '#E3B009',
                borderRightColor: '#E3B009'
            }, 1000).addClass('stiglo');
        });

在单击处理程序内部，范围是click()附加到的元素，在本例中为$('.next')。您可以使用闭包在animate()回调中使用此上下文。

$(document).ready(function () {
    $('.next').click(function () {
        var self = this;
        if ($('.sirina').parent().prev('.krug').hasClass('stiglo')) {
            console.log(this);
            $('.sirina').animate({
                width: '150px'
            }, 1000, function () {
                // self is $('.next')[0]
                $(self).parent().next('.krug').animate({
                    borderTopColor: '#E3B009',
                    borderBottomColor: '#E3B009',
                    borderLeftColor: '#E3B009',
                    borderRightColor: '#E3B009'
                }, 1000).addClass('stiglo');
            });
        }
    });
});
于 2013-03-07T12:51:52.063 回答
3

你的问题是你.sirina用来动画。这将触发所有元素进行动画处理。在这里，您的 if 条件没有任何意义，因为您正在使用.sirina动画。现在我的回答

$(document).ready(function () {
    $('.next').click(function () {
        $('.stiglo').nextAll('.prvi:first').find('.sirina').animate({
                width: '150px'
            }, 1000, function () {

                 $(this).parent().prev('.krug').removeClass('stiglo');

                $(this).parent().next('.krug').animate({
                    borderTopColor: '#E3B009',
                    borderBottomColor: '#E3B009',
                    borderLeftColor: '#E3B009',
                    borderRightColor: '#E3B009'
                }, 1000).addClass('stiglo');
            });

JSFIDDLE

于 2013-03-07T13:11:30.167 回答
2

设置元素的当前索引，看

演示视图

    var current=0;

   $(document).ready(function () {
    $('.next').click(function () {
        if ($('.sirina').parent().prev('.krug').hasClass('stiglo')) {
            console.log(this);
            $('.sirina').eq(current).animate({
                width: '150px'
            }, 1000, function () {
                current++;
                $('.krug').eq(current).animate({
                    borderTopColor: '#E3B009',
                    borderBottomColor: '#E3B009',
                    borderLeftColor: '#E3B009',
                    borderRightColor: '#E3B009'
                }, 1000).addClass('stiglo');
            });
        }
    });
});
于 2013-03-07T12:57:16.333 回答