Question

我正在尝试制作一个计数器，允许用户选择将要参加活动的不同类型的人。用户将能够添加＆＃34;当他们点击数字时，更多的成年人，当他们点击减去它将减少1，这应该与其他两种票类型（学生，高级）一起工作。

所以如果有2个成年人，那么只能有一个学生一个高级或两个高级等。目前我能够增加计数器但是当我点击减去时无法禁用减量。

＆＃13;

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;
  }
});

＆＃13;

<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>

＆＃13;

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>

Jquery增量/减量票据计数器

1 个答案: