Question

我想要做的是简单的jquery向导，我有4个步骤，按钮上一个和下一个。根据你所处的步骤，当你点击下一步时，线应该用金色填充，然后圆圈也要填写。所以如果你在第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'，那么它引用'next'类而不是内部函数。

我希望所有这一切都有道理：）

Answer 1

此回调中的范围是指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');
            });
        }
    });
});

Answer 2

您的问题是您使用.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

Answer 3

设置元素的当前索引，显示

DEMO VIEW

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

从内部Jquery这个元素if

3 个答案: