jquery 增量仅适用于 chrome答案

【问题标题】：jquery increment only works in chromejquery 增量仅适用于 chrome
【发布时间】：2016-03-21 13:25:18
【问题描述】：

$(".incrementer").click(function(){
    var values = $("#layernumber").val(); 
    var item = $("input[type=file]:last").clone(true);
    var txt = $(".layer_selector:last").after('<br>').clone(true);
    if($("#layernumber").val() < 4){
        $("#attach").append(item);
        $("#attach").append(txt);
    }  
    if($("#layernumber").val() > 2){
        $(".incrementer").hide();
    }
});

上面的代码增加层的值

随着层数的增加，文件上传选项也会增加。

但这仅适用于 Chrome。不在 FireFox 或 Internet Explorer 中。

HTML 代码是：

<div class="tab-pane active" id="tab2">
    <h3 class="block">Provide your layer details</h3>
    <div class="form-group">
        <label class="control-label col-md-3">Number of layer
            <span class="required" aria-required="true"> * </span>
        </label>
        <div class="col-md-4">
            <div class="input-group bootstrap-touchspin">
                <span class="input-group-addon bootstrap-touchspin-prefix" style="display: none;"></span>
                <input id="layernumber" type="text" class="form-control" name="layernumber" style="display: block;">
                <span class="input-group-addon bootstrap-touchspin-postfix" style="display: none;"></span>
                <span class="input-group-btn-vertical">
                    <button class="btn btn-default bootstrap-touchspin-up" type="button">
                        <i class="glyphicon glyphicon-plus incrementer"></i>
                    </button>
                    <button class="btn btn-default bootstrap-touchspin-down" type="button">
                        <i class="glyphicon glyphicon-minus decrementer"></i>
                    </button>
                </span>
            </div>
            <span class="help-block"> Provide your number of layers </span>
        </div>
    </div>
    <!-- fileupload starts-->        
    <!-- -->
    <div class="form-group">
        <label class="control-label col-md-3">Choose Layer
            <span class="required" aria-required="true"> * </span>
        </label>
        <div class="col-md-9">
            <div id="attach">
            <div id="previewImg"></div>
                <div class="col-md-9">
                <input type="file" name="layerimages[]" onchange="preview(this);" class="myfile" id="fileid" multiple="">
                <select id="layerid" class="layer_selector" name="layer_selector">
                   <option value="">Please Select</option>    
                   <option value="0">First</option>
                   <option value="1">Second</option>
                   <option value="2">Intermediate</option>
                   <option value="3">Final</option>
                </select>
                </div> 
            </div>
            <br>   
        </div>
    </div>
    <!-- fileupload ends-->
</div>

【问题讨论】：

如果您花一点额外的时间来确保您在此处发布的代码易于阅读，这真的可以帮助人们。
请在您调用Incrementer({ ... }) 的位置添加代码以将input 初始化为增量器。

标签： javascript jquery google-chrome

【解决方案1】：

我为此做了一个小提琴。

https://jsfiddle.net/w1gy8ruj/1/

我对您的代码所做的更改基本上是将 layernumber 输入的值初始化为 0，并在每次单击时递增。

$(document).ready(function() {
  $(".incrementer").click(function() {
    var values = $("#layernumber").val();
    var item = $("input[type=file]:last").clone(true);
    var txt = $(".layer_selector:last").after('<br>').clone(true);
    if ($("#layernumber").val() < 4) {
      $("#attach").append(item);
      $("#attach").append(txt);
    }
    if ($("#layernumber").val() > 2) {
      $(".incrementer-button").hide();
    }

    values++;
    $("#layernumber").val(values);
  });

});

【讨论】：

嗨，我注意到这一定是因为您在 i 标签上有点击处理程序，并且它可能不会像预期的那样每次都被点击，我已将其更改为点击按钮元素

【解决方案2】：

你不使用

var values = $("#layernumber").val();

在这个范围内的任何地方，所以这是不需要的，除非你不想在下面的 if 语句中使用它并用于递增。

而且你不增加层数，所以

if($("#layernumber").val() > 2) {

永远不会执行。您应该增加它并将其设置为

$("#layernumber").val(values)

【讨论】：

@Rahul Ravindran 答案适合您的用例。还有一件事：你应该用 1 而不是 0 来初始化 layernumber，因为你的 html 已经包含了第一个 layer 元素。