优化和合并这些 Jquery 函数的最佳方式

Question

我有 3 个函数，它们都设置了点击事件，这些事件在各自的 div 中触发相同的函数。我想对此进行优化，因此我不会一遍又一遍地重复自己。写这个的最好方法是什么？

//Progress Bar animation when tab clicked
$('#tab1').click(function () {
    $('#stack .progress div').each(function () {
        var display = $(this),
        currentValue = parseInt(display.text()),
        nextValue = $(this).attr('data-values'),
        diff = nextValue - currentValue,
        step = (0 < diff ? 1 : -1);
        if (nextValue == '0') {
            $(display).css('padding', '0');
        } else {
            $(display).css('color', '#fff').animate({
                'width': nextValue + '%'
            }, 'slow');
        }

        for (var i = 0; i < Math.abs(diff); ++i) {
            setTimeout(function () {
                currentValue += step
                display.html(currentValue + '%');
            }, 20 * i);
        }
    })
});
$('#tab2').click(function () {
    $('#design .progress div').each(function () {
        var display = $(this),
        currentValue = parseInt(display.text()),
        nextValue = $(this).attr('data-values'),
        diff = nextValue - currentValue,
        step = (0 < diff ? 1 : -1);
        if (nextValue == '0') {
            $(display).css('padding', '0');
        } else {
            $(display).css('color', '#fff').animate({
                'width': nextValue + '%'
            }, 'slow');
        }

        for (var i = 0; i < Math.abs(diff); ++i) {
            setTimeout(function () {
                currentValue += step
                display.html(currentValue + '%');
            }, 20 * i);
        }
    })
});
$('#tab3').click(function () {
    $('#other .progress div').each(function () {
        var display = $(this),
        currentValue = parseInt(display.text()),
        nextValue = $(this).attr('data-values'),
        diff = nextValue - currentValue,
        step = (0 < diff ? 1 : -1);
        if (nextValue == '0') {
            $(display).css('padding', '0');
        } else {
            $(display).css('color', '#fff').animate({
                'width': nextValue + '%'
            }, 'slow');
        }

        for (var i = 0; i < Math.abs(diff); ++i) {
            setTimeout(function () {
                currentValue += step
                display.html(currentValue + '%');
            }, 20 * i);
        }
    })
});

Answer 1

var progressTargets = {tab1 : "stack", tab2 : "design", tab3 : "other"};
$('#tab1, #tab2, #tab3').click(function () {
    $("#"+progressTargets[$(this).attr("id")]+' .progress div').each(function () {
        var display = $(this),
        currentValue = parseInt(display.text()),
        nextValue = $(this).attr('data-values'),
        diff = nextValue - currentValue,
        step = (0 < diff ? 1 : -1);
        if (nextValue == '0') {
            $(display).css('padding', '0');
        } else {
            $(display).css('color', '#fff').animate({
                'width': nextValue + '%'
            }, 'slow');
        }
        for (var i = 0; i < Math.abs(diff); ++i) {
            setTimeout(function () {
                currentValue += step
                display.html(currentValue + '%');
            }, 20 * i);
        }
    });
});

尝试使用数组定位相关进度条。

Answer 2

向代表选项卡的 HTML 标签添加数据属性。例如：

data-progress="#stack"

data-progress="#design"

data-progress="#other"

定义一个函数，像这样：

function tabClicked() {
    $($(this).data("progress") + ' .progress div').each(function () {
        var display = $(this),
        currentValue = parseInt(display.text()),
        nextValue = $(this).attr('data-values'),
        diff = nextValue - currentValue,
        step = (0 < diff ? 1 : -1);
        if (nextValue == '0') {
            $(display).css('padding', '0');
        } else {
            $(display).css('color', '#fff').animate({
                'width': nextValue + '%'
            }, 'slow');
        }

        for (var i = 0; i < Math.abs(diff); ++i) {
            setTimeout(function () {
                currentValue += step
                display.html(currentValue + '%');
            }, 20 * i);
        }
    });
}

并将其用作点击处理程序：

$("#tab1, #tab2, #tab3").click(tabClicked);

Answer 3

我更喜欢在一个烤箱里烧一个东西。如果你需要改变一件东西，你应该需要在一个地方改变它。

function doAnimation() {
    var display = $(this),
    currentValue = parseInt(display.text()),
    nextValue = $(this).attr('data-values'),
    diff = nextValue - currentValue,
    step = (0 < diff ? 1 : -1);
    if (nextValue == '0') {
        $(display).css('padding', '0');
    } else {
        $(display).css('color', '#fff').animate({
            'width': nextValue + '%'
        }, 'slow');
    }

    for (var i = 0; i < Math.abs(diff); ++i) {
        setTimeout(function () {
            currentValue += step
            display.html(currentValue + '%');
        }, 20 * i);
    }
}
//Progress Bar animation when tab clicked
$('#tab1').click(function () {
    $('#stack .progress div').each(doAnimation);
});
$('#tab2').click(function () {
    $('#design .progress div').each(doAnimation);
});
$('#tab3').click(function () {
    $('#other .progress div').each(doAnimation);
});

优化和合并这些 Jquery 函数的最佳方式

Best way to optimize and merge these Jquery functions

performance

jquery

dry