改进Jquery代码实现

时间:2014-08-15 22:35:24

标签: javascript jquery performance

我正在使用jquery,这段代码正在运行,但我想改进它,因为我没有重用代码。有一种方法可以动态发送$("#btn_step1")更改步骤的数量吗?

$( document ).ready(function() {

    var activeDiv = $("#mod_formSteps-1");
    var body = $("html, body");

    activeDiv.siblings().hide();
    $("#btn_step1").on("click", function( event ){
        event.preventDefault();
        activeDiv.hide();
        activeDiv.next().show();
        activeDiv = $("#mod_formSteps-2");

        body.animate({scrollTop:0}, '500', 'swing');

    });
    $("#btn_step2").on("click", function( event ){
        event.preventDefault();
        activeDiv.hide();
        activeDiv.next().show();
        activeDiv = $("#mod_formSteps-3");

        body.animate({scrollTop:0}, '500', 'swing');
    });
    $("#btn_step3").on("click", function( event ){
        event.preventDefault();
        activeDiv.hide();
        activeDiv.next().show();
        activeDiv = $("#mod_formSteps-4");

        body.animate({scrollTop:0}, '500', 'swing');
    });
});

4 个答案:

答案 0 :(得分:1)

您可以使用属性starts-with selector

执行此类操作
// get all elements with id's that start with btn_step
$("[id^='btn_step']").on("click", function( event ){        
    activeDiv.hide();
    activeDiv.next().show();
    activeDiv = $("#mod_formSteps-" + (+this.id.replace('btn_step','') + 1));
    body.animate({scrollTop:0}, '500', 'swing');
});

或给他们一个类似的课程

$(".theClass").on("click", function( event ){        
    activeDiv.hide();
    activeDiv.next().show();
    activeDiv = $("#mod_formSteps-" + (+this.id.replace('btn_step','') + 1));
    body.animate({scrollTop:0}, '500', 'swing');
});

查看代码,你实际上可以做到这一点

$(".theClass").on("click", function( event ){
    activeDiv = activeDiv.hide().next().show();       
    body.animate({scrollTop:0}, '500', 'swing');
});

答案 1 :(得分:0)

您可以使用btn_steps的类而不是个人ID。 使用类可以使用单个函数,单击.btn_step元素后会触发该函数。

答案 2 :(得分:0)

只有改变的是一个数字,如

$( document ).ready(function() {

    var activeDiv = $("#mod_formSteps-1"),
        body = $("html, body"),
        steps = 4,
        i = 0;


    activeDiv.siblings().hide();

    for (i; i < steps; i++) {
        var selector = "#btn_step" + i;

        $(selector).on("click", function( event ){
            event.preventDefault();
            activeDiv.hide();
            activeDiv.next().show();

            activeDiv = $("#mod_formSteps-" + (i + 1));

            body.animate({scrollTop:0}, '500', 'swing');
        })
    }
});

答案 3 :(得分:0)

您有很多代码重复,因为您对具有三个不同id属性的元素执行相同的操作。考虑为每个元素btn_stepbtn_step1btn_step2添加一个类btn_step3。然后,在将step函数分配给click类的每个元素时,跟踪您所处的btn_step

$( document ).ready(function() {

    var body = $("html, body");

    $(".btn_step").each(function(index, element) {
        element.click(function() {
            var step = index + 1;

            event.preventDefault();

            var activeDiv = $("#mod_formSteps-" + step);
            activeDiv.siblings().hide();
            activeDiv.hide();
            activeDiv.next().show();
            activeDiv = $("#mod_formSteps-2");

            body.animate({scrollTop:0}, '500', 'swing');
        });
    });
};