这是我第一次尝试使用Ajax。我有一个名为
当用户点击“下一步”时,我想通过Ajax将一系列“步骤”(html内容)加载到容器中。
目前我的代码如下:
'.onboarding_steps'
的容器,页面上还有一个ID为#next
的下一步按钮。当用户点击“下一步”时,我想通过Ajax将一系列“步骤”(html内容)加载到容器中。
目前我的代码如下:
var steps = [
'This is step one',
'This is step two',
'This is step three',
'This is step four'
],
counter = 0;
$('.onboarding_steps').html(steps[counter]); // your initial value
$('#next').click(function () {
counter = (counter + 1) % steps.length; // increment your counter
$('.onboarding_steps').html(steps[counter]); // the new incremented value
});
这段代码当前是通过每个步骤迭代来完成的。然而,现在我想进一步使用Ajax。我应该如何实现类似于这样的功能:
var steps = [
$.get( "wp-content/plugins/skizzar-onboarding/ajax/step1.php", function( data ) {
$( ".onboarding_steps" ).html( data );
}),
$.get( "wp-content/plugins/skizzar-onboarding/ajax/step2.php", function( data ) {
$( ".onboarding_steps" ).html( data );
}),
$.get( "wp-content/plugins/skizzar-onboarding/ajax/step3.php", function( data ) {
$( ".onboarding_steps" ).html( data );
}),
$.get( "wp-content/plugins/skizzar-onboarding/ajax/step4.php", function( data ) {
$( ".onboarding_steps" ).html( data );
})
],
counter = 0;
$('.onboarding_steps').html(steps[counter]); // your initial value
$('#next').click(function () {
counter = (counter + 1) % steps.length; // increment your counter
$('.onboarding_steps').html(steps[counter]); // the new incremented value
});
目前这段代码只显示最后一步,而不是允许我逐步运行每一步。
loadURL
。 - MinusFour