在递增i

时间:2017-02-24 14:17:03

标签: jquery onclick

我正在构建一个具有多个阶段的网站,每个阶段都有一个按钮,单击该按钮将滑动下一页。按钮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('&#10003;');
          $('.progress .circle:nth-of-type(' + (i+1) + ')').addClass('active');


          i++;
     }
    console.log(i);
});

2 个答案:

答案 0 :(得分:0)

在Jquery每次尝试动态添加元素时,在此示例中为HAVING,您需要添加每个侦听器。
在页面的开头(button )Jquery将侦听器添加到页面中的每个元素。如果您不自行添加它,它将不会添加更多。那是你的问题。

您应该考虑使用一个按钮,其中包含您希望触发$(document).ready(function(){});事件的类,以及包含变量click的数据属性。这样,您的按钮上总会有一个监听器,您可以将变量保存在安全的地方。

答案 1 :(得分:0)

当你的页面加载并且你的代码运行时,click事件在具有“request-btn-1”id的元素上设置,因为那时i = 1。

因此第一个按钮的点击事件将继续有效,但您没有在其他按钮上设置任何事件,之后只是更改“i”的值无法改变它。

你可以在每个按钮上设置一个点击事件,或者像Nicolas说有一个按钮,其属性可以相应地更改值。