改进Jquery代码实现

Improve Jquery code implementation

本文关键字：实现 代码 Jquery 改进      更新时间：2023-09-26

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

您可以使用属性start_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');
});

您可以为btn_steps使用类而不是单个id。使用类，您可以使用一个函数，一旦单击.btn_step元素就会触发。

唯一改变的是数字所以像

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

您有很多代码重复，假设您对具有三个不同id属性的元素执行相同的操作。考虑向每个元素btn_step1、btn_step2和btn_step3添加一个类btn_step。然后，在将click函数分配给btn_step类的每个元素时，跟踪您所处的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');
        });
    });
};
相关文章：