使用jquery单击时增量值不起作用

This is the code I added in my script. It doesn't seem to be working though.

这是我在脚本中添加的代码。它似乎没有工作。

$('.add').on('click', function(){
    $(this).parents('.row').find('.box-row').append('<div class="box">    <span>0</span></div>');
});

var i=0;
$('.box').each(function(i){
    $(this).on('click', function(){
        i++;
        $(this).parent().find('span').html(i);
    });
});

3 个解决方案

#1

You have a couple of issues. Firstly, the i parameter of the anonymous function you provide to each as it is preventing access to the i variable in the higher scope. Also, the .box elements are appended dynamically, so you need to use a delegated event handler which renders the use of each() moot anyway. Try this:

你有几个问题。首先，您提供给每个匿名函数的i参数，因为它阻止了对更高范围中的i变量的访问。此外，.box元素是动态附加的，因此您需要使用委托事件处理程序，无论如何都会使用each（）。尝试这个：

var i = 0;
$('.box-row').on('click', '.box', function() {
    i++;
    $(this).parent().find('span').html(i);
});

Example fiddle

示例小提琴

Note that the above code will amend the counter in all span elements added, no matter how many there are. If you only want to change the counter in the clicked .box then you would need to amend your logic slightly:

请注意，上面的代码将修改所添加的所有span元素中的计数器，无论有多少。如果您只想更改单击的.box中的计数器，则需要稍微修改您的逻辑：

$('.box-row').on('click', '.box', function() {
    var $el = $(this);
    var count = $el.data('count') || 1;    
    $el.find('span').html(count);
    $el.data('count', ++count);
});

Example fiddle

示例小提琴

#2

i is already an external var.

我已经是外部变种了。

var i=0;
$('.box').each(function(){
    $(this).on('click', function(){
        i++;
        $(this).parent().find('span').html(i);
    });
});

remove i from .each(function(i)) and you should be ok. i think the error is there.

从.each（function（i））中删除i，你应该没问题。我认为错误存在。

#3

Remove i from function(i), as you have already declare this. Jquery

从函数（i）中删除i，因为您已经声明了这一点。 jQuery的

$(document).ready(function(){
    var i=0;
    $('.box').each(function(i){
        $(this).on('click', function(){
            i++;
            $(this).parent().find('span').html(i);
            console.log(i);
        });
    });
}); 

HTML

HTML

<div>
<span></span>
<input type="button" value="click me" class="box" />
</div>

demo:https://jsfiddle.net/ku5vq0zh/2/

演示：HTTPS：//jsfiddle.net/ku5vq0zh/2/