我正在使用 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');
});
});
最佳答案
您可以使用属性 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');
});
关于javascript - 改进Jquery代码实现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25335167/