JavaScript的增量VAR不工作

Question

我有以下腳本：

$(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次以上，然后按刪除，然后再次按添加。 非常感謝

您可以看到它的工作原理，為什么不好呢？

Answer 1

使用數字而不是字符串：（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--;
});
}

Answer 2

編輯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標記早得多。 而且您有重復的ID。 減價不是問題，根本不只是減價。 jQuery事件僅附加到執行時存在的元素上。 如果以后要添加另一個事件，則不會將事件添加到其中。 要擺脫重復的id，可以使用class代替id，然后使用$（'。remove-file'）。click（）

注意＃是如何變為點的。 主題標簽用於ID，點用於類。

相反，您可以做到這些，而不必是唯一的。

您可以嘗試使用.live，這樣即使您的新標簽也會添加事件監聽器。

jQuery函數未綁定到新添加的dom元素