jquery 增量仅适用于 chrome

Question

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

上面的代码增加了layers的值

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

但这仅适用于 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>

Answer 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);
  });

});

Answer 2

你不使用

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

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

而且你不增加层数，所以

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

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

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