javascript增量var不起作用

javascript increment var not working

本文关键字：不起作用 var 增量 javascript      更新时间：2023-10-31

我有以下脚本：

$(function() {
    var no_of_file = {{$image_counter}};
            $('#remove-file').click(function() {
                 no_of_file--;
            }); 
    if (no_of_file >= '5'){
        $("#dv1").hide();
        $("#imageLabel").hide();
    }else{              
        /* Append More Input Files */
        $('#anc_add_more').click(function() {
            no_of_file++;
            // alert(no_of_file);
            if(no_of_file < {{$role_pic_limit}})
            {
            $('#spn_inputs').append('<span><input type="file" name="myfile[] id="fileChooser" style="float:right;"/><a href="javascript:void(0);"  onclick="$(this).parent().remove();" style="float:left;" id="remove-file" >Remove</a><br/></span>');      
            }
            else{ 
                alert("You can upload only {{$role_pic_limit}} images");
            }
        }); 
    }
});

当我单击"添加更多文件"时，我会附加更多的输入并将+1添加到no_of_file，我的问题是当我尝试按Remove时，它应该是向下-1到no_of _file var，为什么它不是向下增量？

编辑15/02：

$(function() {
    var no_of_file = {{$image_counter}};
    if (no_of_file >= '5'){
        $("#dv1").hide();
        $("#imageLabel").hide();
    }else{              
        /* Append More Input Files */
        $('#anc_add_more').click(function() {
            no_of_file++;
            // alert(no_of_file);
            if(no_of_file < {{$role_pic_limit}})
            {
            $('#spn_inputs').append('<span><input type="file" name="myfile[]" class="fileChooser" style="float:right;"/><a href="javascript:void(0);"  onclick="$(this).parent().remove();" style="float:left;" id="remove-file" >Remove</a><br/></span>');      
            }
            else{ 
                alert("You can upload only {{$role_pic_limit}} images");
            }
        }); 
       $(document).on('click', '#remove-file,.anc_delete_more', function() { 
           no_of_file--;
        });
    }
});

这现在是有效的，但减少不是完美的是这样的：

Click add more file +1
Click add more file +1
Click add more file +1
Click remove more file -1
Click remove more file nothing no decrease
Click remove more file nothing no decrease

jsfiddle:

https://jsfiddle.net/dgh3ndpm/2/

请查看我已经上传了我正在使用的jsfiddle，你可以清楚地看到这个问题，再按5次添加，然后再按删除，再按添加。非常感谢

你可以看到它是如何工作的不那么好为什么？

使用数字，而不是字符串：（javascript自动选择他认为变量是什么，它经常混淆字符串而不是数字，除以1保证我们会有一个"int"变量。。。我把它放在你的小提琴里改了，效果很好。。。

编辑：我只是看到了，它只适用于第一个"删除"，所以你的ID显然有问题。

请改用类选择器。

编辑：好的，有些问题，但这是100%工作！！：P

var no_of_file = 0 / 1;
$(function () {
no_of_file = 0 / 1;
if (no_of_file >= 5) {
    $("#dv1").hide();
    $("#imageLabel").hide();
} else {
    /* Append More Input Files */
    $('.anc_add_more').click(function () {
        alert(no_of_file);
        if (no_of_file < 5) {
              no_of_file++;
            $('#spn_inputs').append('<span><input type="file" name="myfile[]" class="fileChooser" style="float:right;"/><a href="javascript:void(0);" style="float:left;" class="remove-file" >Remove</a><br/></span>');
        } else {
            alert("You can upload only 5 images");
        }
        initRemove();
    }
    );
  }
}
);
function initRemove() {
$(".remove-file").unbind('click');
$('.remove-file').click(function () {
    $(this).parent().remove();
    no_of_file--;
});
}

编辑15/02：

http://jsfiddle.net/ccn35w40/6/

我使用的是类而不是ID，并且能够将事件附加到标记上，这些标记是软件添加到DOM中的：

$(document).on('click', '.remove-file', function () {
  alert('remove one #files:'+no_of_file);
  $(this).parent().remove();
  no_of_file--;
});

原始帖子：

有了其余的HTML和工作，jsfiddle将更容易调试。这将不是答案，更确切地说，当你遇到这样的代码问题时，你可以采取什么步骤。

var no_of_file = 2;
$('#remove-file').click(function() {
   no_of_file--;
   alert(no_of_file);
}); 
$('#add-file').click(function() {
  no_of_file++;
  alert(no_of_file);
});

http://jsfiddle.net/ccn35w40/1/

但它可以工作，添加alert（）和console.log（）查看事件是否根本没有被触发，或者它被触发了，但代码没有执行您想要的操作。从那时起，你将知道更多的方式去调试它；递减本身是有效的，所以这个问题与js的其余部分有关。

如果你想做一些错误的事情，你可以尝试将onClick和jQuery事件处理程序附加到它上。实际上，jQuery不会被附加，因为它在HTML标记出现之前就被调用了。而且你有重复的身份证。法令不是问题，根本就不是命令。jQuery事件仅附加到执行时存在的元素。如果您稍后要添加另一个，则事件将不会添加到其中。要消除重复的id，您可以使用class而不是id，然后使用$（'.remove file'）。单击（）

请注意#是如何变为句点的。hashtag表示ID，dot表示类。

相反，你可以做这些不一定是独一无二的。

您可以尝试使用.live，这样即使您的新标签也会添加事件侦听器。

jQuery函数未绑定到新添加的dom元素

相关文章：