Question

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

$('.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);
    });
});

Answer 1

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

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

Example fiddle

请注意，上面的代码将修改添加的所有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

Answer 2

i已经是外部变种。

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

从i删除.each(function(i))，您应该没问题。我认为错误就在那里。

Answer 3

从函数（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

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

演示：https://jsfiddle.net/ku5vq0zh/2/

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

3 个答案: