javascript - 改进Jquery代码实现

Question

我正在使用 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');
    });
});

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

或者给他们一个类似的类(class)

$(".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');
});