javascript - Jquery递增/递减票据计数器

Question

我正在尝试制作一个计数器，允许用户选择将参加事件的不同类型的人。用户单击数字时将能够“添加”更多成人，单击减号时会将数字减少 1，这应该与其他两种票类型(学生、老年人)一起使用。

因此，如果有 2 名成人，则只能有一名学生、一名高年级学生或两名高年级学生等。目前，我可以增加计数器，但无法在单击减号时禁用减量。

var quantity = 4;
var number = 0;
$(document).on('click', '.num', function() {
  number++;
  if (number <= quantity) {
    $(this).text(number)
  } else {
    number--;
  }
});

$(document).on('click', '.fa-minus', function() {
  number--;
  if (number < 0) {
    number++;
  } else {
    $(this).text = number;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<h3>
Total Number of Tickets : 4
</h3>
<i class="minus">Minus</i>
<div class="quantity">Adult :
  <span class="num"> 0</span>
</div>
<i class="minus">Minus</i>
<div class="quantity">Student :
  <span class="num"> 0</span>
</div>
<i class="minus">Minus</i>
<div class="quantity">Senior :
  <span class="num"> 0</span>
</div>

Answer 1

试试这个，它应该按照你想要的方式工作。

var quantity = 4;
var number = 0;
$(document).on('click', '.num', function() {
  var thisnumber = $(this).text();
  if (number < quantity) {
    number++;
    $(this).text(parseInt(thisnumber) + 1)
  }
});

$(document).on('click', '.minus, .fa-minus', function() {
  var thisnumber = $(this).next().find(".num").text();
  if (number > 0) {
    number--;
    $(this).next().find(".num").text(parseInt(thisnumber) - 1)
  }
});

演示

var quantity = 4;
var number = 0;
$(document).on('click', '.num', function() {
  var thisnumber = $(this).text();
  if (number < quantity) {
    number++;
    $(this).text(parseInt(thisnumber) + 1)
  }
});

$(document).on('click', '.minus, .fa-minus', function() {
  var thisnumber = $(this).next().find(".num").text();
  if (number > 0) {
    number--;
    $(this).next().find(".num").text(parseInt(thisnumber) - 1)
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<h3>
  Total Number of Tickets : 4
</h3>
<i class="minus">Minus</i>
<div class="quantity">Adult :
  <span class="num"> 0</span>
</div>
<i class="minus">Minus</i>
<div class="quantity">Student :
  <span class="num"> 0</span>
</div>
<i class="minus">Minus</i>
<div class="quantity">Senior :
  <span class="num"> 0</span>
</div>