使用JQuery将输入增加1，限制为9，并连接到隐藏输入

Using JQuery to increase input by 1 limiting to 9 and concatenating to hidden input

本文关键字：输入隐藏连接 JQuery 增加使用更新时间：2023-09-26

尝试使用加号/减号将数字增加/减少0-9，然后将输入值连续连接到一个将提交到CMS的隐藏输入。

JSFiddle在这里，目前无法限制数字，也无法连接值。

https://jsfiddle.net/c06sy673/2/

//Script for concatinating counter1 and counter2
$(document).click(function() {
  var value1 = $('.counter1').val();
  var value2 = $('.counter2').val();
  $(".output").val(value1 + value2);
});
//Script for increasing value increment by +1 and preventing numbers below 0
$(function() {
  $("form .counter-inner").append('<div class="inc increment_button">+</div><div class="dec increment_button">-</div>');
  $(".increment_button").on("click", function() {
    var $button = $(this);
    var oldValue = $button.parent().find("input").val();
    if ($button.text() == "+") {
      var newVal = parseFloat(oldValue) + 1;
    } else {
      // Don't allow decrementing below zero
      if (oldValue > 0) {
        var newVal = parseFloat(oldValue) - 1;
      } else {
        newVal = 0;
      }
    }
    $button.parent().find("input").val(newVal);
  });
});

.counter-wrapper {
  position: relative;
  width: 480px;
  display: inline-block;
}
.inc {
  position: absolute;
  top: 22px;
  left: 50%;
  margin-left: -15px;
  font-size: 60px;
  line-height: 0px;
}
.dec {
  position: absolute;
  bottom: 32px;
  left: 50%;
  margin-left: -12px;
  font-size: 90px;
  line-height: 0px;
}
.counter {
  -webkit-appearance: none;
  -webkit-rtl-ordering: logical;
  -webkit-user-select: text;
  cursor: auto;
  font-size: 130px;
  width: 187px;
  text-align: center;
  margin-left: 0px;
  margin-top: 60px;
  margin-bottom: 60px;
  border: 1px solid black;
  padding: 50px 0px;
  height: 280px;
  color: white;
  background-color: black;
  font-weight: 700;
}
.increment_button {
  cursor: pointer;
}
.counter-inner {
  display: inline-block;
  position: relative;
}

<form method="post" action="">
  <div class="counter-wrapper">
    <label for="name">Team 1</label>
    <div class="counter-inner">
      <input type="text" name="team_1--count1 increment" class="counter counter1" value="0">
    </div>
    <div class="counter-inner">
      <input type="text" name="team_1--count2 increment" class="counter counter2" value="0">
    </div>
  </div>
  <div class="counter-wrapper">
    <label for="name">Team 1</label>
    <div class="counter-inner">
      <input type="text" name="team_1--count1 increment" class="counter counter3" value="0">
    </div>
    <div class="counter-inner">
      <input type="text" name="team_1--count2 increment" class="counter counter4" value="0">
    </div>
  </div>

  <input type="submit" value="Submit" id="submit">
</form>

<p class="output"></p>

如果我只是错过了一些非常明显的东西，请提前道歉！

这就是您想要的：

https://jsfiddle.net/c06sy673/6/

//Script for concatinating counter1 and counter2
$(document).click(function () {
            var value1 = $('.counter1').val();
            var value2 = $('.counter2').val();
            $(".output").text(value1 + value2);
        });
//Script for increasing value increment by +1 and preventing numbers below 0
          $(function () {
            $("form .counter-inner").append('<div class="inc increment_button">+</div><div class="dec increment_button">-</div>');
            $(".increment_button").on("click", function () {
                var $button = $(this);
                var oldValue = $button.parent().find("input").val();
                if ($button.text() == "+") {
                        if(oldValue < 9){
                        var newVal = parseFloat(oldValue) + 1;
                    }else{
                      var newVal = parseFloat(oldValue);
                    }
                } else {
                    // Don't allow decrementing below zero
                    if (oldValue > 0) {
                        var newVal = parseFloat(oldValue) - 1;
                    } else {
                        newVal = 0;
                    }
                }
                $button.parent().find("input").val(newVal);
            });
        });

只需更改

if ($button.text() == "+") {
  var newVal = parseFloat(oldValue) + 1;
}

至

if ($button.text() == "+") {
  var newVal = parseFloat(oldValue) < 9 ? parseFloat(oldValue) + 1 : parseFloat(oldValue);
}

jsFiddle

替换

var newVal=parseFloat（oldValue）+1；

whit

var temp=parseFloat（oldValue）+1；newVal＝温度<9？温度：9；

这应该将数字限制为9。

但我不知道你说的"连接值"是什么意思。