Jquery/jsを使用してボタン/入力を使用して入力整数フィールドセットの値を増減する

Question

プリセット値と異なる整数を持つ一連の入力を持つ必要があります。これらの入力値を予め設定された量だけ減少させる）。値10,20,30の入力があるとし、ボタンを押すと値10のように値を大きくして、入力値が同時に20,30,40に更新されるようにします。私は約5非常に似ているが、しばしば "Id"と呼ばれるものを記述する-6の以前の回答は使用されていますが、入力のクラスを参照する必要があります。ここで半作品が見つかったコードの1つは、数年前の答えから抜粋したものです。 HTML：

<input name="qty" id="qty" type="text" value="10" size="3" > 
<input name="qty" id="qty1" type="text" value="20" size="3" > 
<input type="button" id="qtyplus" value="+" onclick="return false"> 
<input type="button" id="qtyminus" value="HELLO" onclick="return false"> 

のjQuery：

<script type="text/javascript" src="js/jquery.min.js"></script> 
<script>jQuery(function(){ 
jQuery("#qtyplus").click(function(){  
jQuery(":text[name='qty']").val( Number(jQuery(":text[name='qty']").val()) + 1); 
}); 
jQuery("#qtyminus").click(function(){ 
    if(jQuery('#qty').val()>1) 
    jQuery(":text[name='qty']").val( Number(jQuery(":text[name='qty']").val()) - 1); 

}); 
}); 

もありますが、以前に私が私の目的のために働くことはできません別の投稿からjfiddleを執筆しました。

Answer 1

JS Fiddle Demo

HTML：

<form method="post" action=""> 
    <div class="controls"> 

    <div> 
     <label for="name">Item One</label> 
     <input type="text" name="french-hens" id="french-hens" value="10"> 
    </div> 
    <div> 
     <label for="name">Item Two</label> 
     <input type="text" name="turtle-doves" id="turtle-doves" value="20"> 
    </div> 
    <div> 
     <label for="name">Item Three</label> 
     <input type="text" name="partridge" id="partridge" value="30"> 
    </div> 

    </div> 
    <div class="inc button">+</div> 
    <div class="dec button">-</div> 
    <input type="submit" value="Submit" id="submit"> 
</form> 

CSS：

#page-wrap { 
    width: 500px; 
    margin: 100px auto; 
} 

h1 { 
    font: 26px Georgia, Serif; 
    margin: 0 0 10px 0; 
} 

form { 
    margin: 50px 0 0 0; 
} 

label { 
    font: bold 20px Helvetica, sans-serif; 
    display: block; 
    float: left; 
    text-align: right; 
    padding: 5px 10px 0 0; 
    width: 140px; 
} 

input[type=text] { 
    float: left; 
    width: 40px; 
    font: bold 20px Helvetica, sans-serif; 
    padding: 3px 0 0 0; 
    text-align: center; 
} 

form div { 
    overflow: hidden; 
    margin: 0 0 5px 0; 
} 


.dec { 
    background-position: 0 -29px; 
} 

.buttons { 
    padding: 20px 0 0 140px; 
} 

.button{ 
    cursor: pointer; 
} 

JS：

$(function() { 

    $(".button").on("click", function() { 

    var $button = $(this); 

    $(".controls input").each(function() { 
     console.log($(this)); 
     var oldValue = $(this).val(); 

     if ($button.text() == "+") { 
     var newVal = parseFloat(oldValue) + 10; //custom-preset value enter here 
     } else { 
     // Don't allow decrementing below zero 
     if (oldValue > 0) { 
      var newVal = parseFloat(oldValue) - 10; //custom-preset value enter here 
     } else { 
      newVal = 0; 
     } 
     } 

     $(this).val(newVal); 

    }); 
    }); 
});