增加一個輸入類型的數字

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

您應該能夠使用瀏覽器本身生成此功能，而不是自己努力工作。例如：

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

您可能不需要使用其中的某些屬性，但我列入他們以防萬一

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>