我正在使用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');
});
});
答案 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_step
,btn_step1
和btn_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');
});
});
};