Question

我需要有一系列输入，带有预设值，每个输入都是一个不同的整数，并且有一个按钮，当按下时，这些输入值按预设量增加（另一个按钮减少）。假设我输入值10,20,30，然后我可以通过按下一个按钮来增加这些值，比如值10，这样这些输入值会同时更新为20,30,40。我研究了大约5 -6以前的答案描述了非常相似的东西，但是经常使用“Id”，而我需要引用一类输入。这里发现的半成品代码之一是几年前的答案。 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);

    });
  });
});

使用Jquery / js使用按钮/输入增加/减少输入整数字段集的值

1 个答案: