我正在构建一个具有多个阶段的网站,每个阶段都有一个按钮,单击该按钮将滑动下一页。按钮id用计数器动态递增,但它只在第一次工作,第二次不会调用点击功能,这是代码。有什么建议吗?
HTML
<button id="request-btn-1" class="red-button">Submit</button>
<button id="request-btn-2" class="red-button">Submit</button>
<button id="request-btn-3" class="red-button">Submit</button>
JS
var i = 1;
var count = $('.progress .circle').length;
console.log(count)
$('.progress .circle').removeClass().addClass('circle');
$('.progress .bar').removeClass().addClass('bar');
$('.progress .circle:nth-of-type(' + i + ')').addClass('active');
$('#request-btn-'+i).click(function() {
if(i < count) {
$('#request-stage-'+i).animate({
left: '-=1140px'
});
$('#request-stage-'+(i+1)).animate({
left: '-=1140px',
});
$('.progress .circle:nth-of-type(' + (i) + ')').removeClass('active').addClass('done');
$('.progress .circle:nth-of-type(' + (i) + ') .label').html('✓');
$('.progress .circle:nth-of-type(' + (i+1) + ')').addClass('active');
i++;
}
console.log(i);
});
答案 0 :(得分:0)
在Jquery每次尝试动态添加元素时,在此示例中为HAVING
,您需要添加每个侦听器。
在页面的开头(button
)Jquery将侦听器添加到页面中的每个元素。如果您不自行添加它,它将不会添加更多。那是你的问题。
您应该考虑使用一个按钮,其中包含您希望触发$(document).ready(function(){});
事件的类,以及包含变量click
的数据属性。这样,您的按钮上总会有一个监听器,您可以将变量保存在安全的地方。
答案 1 :(得分:0)
当你的页面加载并且你的代码运行时,click事件在具有“request-btn-1”id的元素上设置,因为那时i = 1。
因此第一个按钮的点击事件将继续有效,但您没有在其他按钮上设置任何事件,之后只是更改“i”的值无法改变它。
你可以在每个按钮上设置一个点击事件,或者像Nicolas说有一个按钮,其属性可以相应地更改值。