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>