Question

你好我有一个数字类型的输入形式是一个数量，我已经做了两个按钮一个和一个 - 按钮增加，减少数量，问题是在某些情况下增量不是1，但是2,5,15等。

所以我这样做：

我的表格：

<div id="ModalScan" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                 Scannez les codes-barres à ajouter à la commande.
            </div>
            <div class="modal-body" style="height: 214px;">
                <br/>
                {{ form_start(scan_form, {'attr': {'id' : 'scan-reassort', 'class' : 'form-inline'}}) }}
                    {{ form_label(scan_form.gencode) }}
                    {{ form_errors(scan_form.gencode) }}
                    {{ form_widget(scan_form.gencode, {'attr': {'onkeyup': 'showHint(this.value)'} }) }}
                    <br><label>Designation : </label><span id="designationModal" style="padding-left: 20px;"></span><br>
                    <br><label>Prix unitaire : </label><span id="prixModal" style="padding-left: 20px;"></span><br>
                    <br><label>Colisage : </label><span id="colisageModal" style="padding-left: 40px;"></span><br>
                    {{ form_label(scan_form.quantite) }}
                    {{ form_errors(scan_form.quantite) }}
                    {{ form_widget(scan_form.quantite, {'attr': {'min': '','value': ''}})}}
                    &nbsp;<a href="#ajout" id="plus"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></a>&nbsp;&nbsp;<a href="#moins" id="moins"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></a><br/><br/>
                {{ form_rest(scan_form) }}
                {{ form_end(scan_form) }}
            </div>
            <div class="modal-footer">
                <input type="submit" class="btn btn-menu" value="Valider">
                <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
            </div>
        </div>
    </div>
</div>

我的js：

$(function(){
var input = document.getElementById('reassort_scan_quantite'),
    plus = document.getElementById('plus'),
    moins = document.getElementById('moins');
var colisage = Number(document.getElementById('reassort_scan_quantite').getAttribute('colisage'));
var miniCommande =  Number(document.getElementById('reassort_scan_quantite').getAttribute('min'));

if(miniCommande === 1){
    plus.onclick=function(e){
        e.preventDefault();
        input.value++;
    }
    moins.onclick=function(e){
        e.preventDefault();
        if(input.value>1) input.value--;
    }
}
else{
    plus.onclick=function(e){
        value = parseInt(input.value);
        e.preventDefault();
        input.value = value + colisage;
    }
    moins.onclick=function(e){
        value = parseInt(input.value);
        e.preventDefault();
        if(input.value>miniCommande) input.value = value - colisage;
    }
}
});
function showHint(str) {
if (str.length == 13) {
    $.ajax({
        url: 'http://localhost/sf/web/extranet_dev.php/plateforme/reassort_scan/' + str,
        method: "POST",
        dataType: "json",
        success: function (json) {
            var nom = json.nom;
            var prix = json.prix;
            var colisage = json.colisage;
            var miniCommande = json.minicommande;
            document.getElementById("designationModal").innerHTML = nom;
            document.getElementById("prixModal").innerHTML = prix;
            document.getElementById("colisageModal").innerHTML = colisage;
            document.getElementById("reassort_scan_quantite").setAttribute("min", miniCommande);
            document.getElementById('reassort_scan_quantite').setAttribute("value", miniCommande);
            document.getElementById("reassort_scan_quantite").setAttribute("data-colisage", colisage);
        }
    });
}
}

我不知道为什么，但这根本不起作用，我尝试了很多东西，如：

$(function(){
var input = $('#reassort_scan_quantite');
var inputValue = parseInt(input.val());
var plus = $('#plus');
var moins = $('#moins');
var colisage = parseInt(input.attr("data-colisage"));
var min = parseInt(input.attr("min"));
var step = (min < 2) ? 1 : colisage;
var miniCommande = parseInt(input.attr('min'));

function addition(){
    if(miniCommande < 2){
            inputValue++;
    }
    else{
            inputValue = inputValue + colisage;
    }
    input.val(inputValue);
}

function soustraction(){
    if(input.val() > 1){
        if(miniCommande < 2){
                inputValue--;
        }
        else{
            inputValue = inputValue - colisage;
        }
        input.val(inputValue);
    }
}

$('#plus').click(function (e) {
    e.preventDefault();
    addition();
});

$('#moins').click(function(e){
    e.preventDefault();
    soustraction();
});

});

但仍然无法正常工作：/，有人可以帮我吗？

这是我需要的东西，https://jsfiddle.net/2xt9yv6b/但在我的情况下，值是在页面加载后设置的。

Answer 1

我找到答案谢谢大家。

$(function () {
    console.log("toto");

    function addition() {
        var input = $('#reassort_scan_quantite');
        var inputValue = parseInt(input.val());
        var colisage = parseInt(input.attr("data-colisage"));
        var min = parseInt(input.attr("min"));
        var miniCommande = parseInt(input.attr('min'));
        if (miniCommande === 1) {
            inputValue++;
        } else {
            inputValue = inputValue + colisage;
        }
        input.val(inputValue);
    }

    function soustraction() {
        var input = $('#reassort_scan_quantite');
        var inputValue = parseInt(input.val());
        var colisage = parseInt(input.attr("data-colisage"));
        var min = parseInt(input.attr("min"));
        var miniCommande = parseInt(input.attr('min'));
        if (input.val() > min) {
            if (miniCommande === 1) {
                inputValue--;
            } else {
                inputValue = inputValue - colisage;
            }
            input.val(inputValue);
        }
    }

    $('#plus').click(function (e) {
        e.preventDefault();
        addition();
    });

    $('#moins').click(function (e) {
        e.preventDefault();
        soustraction();
    });

});

Answer 2

您应该能够使用浏览器本身生成此功能，而不是自己做艰苦的工作。例如：

＆＃13;

<input type="number" min="0" max="30" value="0" step="5"></input>

＆＃13;

您可能不需要使用其中的某些属性，但我将它们包括在内以防

Answer 3

正如我在评论中所说，读取方法中的值/属性。基本的想法，而不需要有两个单独的方法。

$("[data-dir]").on("click", function () {
    var dir = $(this).data("dir"),
        inp = $("#x"),        
        step = Number(inp.data("step")),
        min = Number(inp.data("min")),
        val = Number(inp.val());
    val = dir * step + val;
    if (val < min ) {
      val = min;
    }
    inp.val(val);
} );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="x" type="text" data-min="2" value="2" data-step="2" />
<button data-dir="1">+</button>
<button data-dir="-1">-</button>

增加输入类型编号

3 个答案: