Question

我想显示价格（动态值），我希望有一个复选框，如果点击，将应用15％的折扣。

但如果没有取消，则该值应为全部数量

＆＃13;

  $("#discount").click(function() {
    var value = $('p').text()
    if ($('#discount').is(':checked')) {
      var intValue = parseInt(value)
      var percentValue = intValue-(intValue*15/100)
      $('p').text(percentValue)
    } else {
      $('p').text(value)
    }
  })

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>500</p>

<input type="checkbox" id="discount" name="discount" value="discount"> Discount

＆＃13;

如果有人取消选中该复选框，如何获取初始值？

谢谢！

Answer 1

要实现此目的，您需要将原始价格存储在不受计算影响的地方。要做到这一点，您可以使用data属性，如下所示：

＆＃13;

$("#discount").change(function() {
  var checked = this.checked;

  $('p').text(function() {
    var original = $(this).data('original');
    return checked ? original - (original * 15 / 100) : original;
  })
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p data-original="500">500</p>

<label>
  <input type="checkbox" id="discount" name="discount" value="discount">
  Discount
</label>

＆＃13;

请注意，我使用change事件处理程序（对于复选框和单选按钮更好的做法）稍微整理了代码，将复选框包装在label中以增加命中区域的大小，并使用text()方法的回调来简化逻辑并减少选择器的数量。您也不需要明确地将价格转换为整数，因为data()会为您做到这一点。

Answer 2

您可以将原始价格存储在隐藏字段中，并在取消选中复选框时访问该字段，如下所示：

＆＃13;

  $("#discount").click(function() {
    var value = $('p').text()
    if ($('#discount').is(':checked')) {
      var intValue = parseInt(value)
      var percentValue = intValue-(intValue*15/100)
      $('p').text(percentValue)
    } else {
      var val=$("#hdnOriginalPrice").val();
      $('p').text(val)
    }
  })

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>500</p>
 <input type="hidden" id="hdnOriginalPrice" value="500"/>
<input type="checkbox" id="discount" name="discount" value="discount"> Discount

＆＃13;

Answer 3

您可以将基本价格存储在data属性中，稍后使用jQuery .attr()函数：

＆＃13;

$("#discount").on('change', function() {
  let value = +$('p').attr('data-base-price');
  if ($(this).is(':checked')) {
    let percentValue = value - (value * 15 / 100)
    $('p').text(percentValue)
  } else {
    $('p').text(value)
  }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p data-base-price="500">500</p>

<input type="checkbox" id="discount" name="discount" value="discount"> Discount

＆＃13;

Answer 4

＆＃13;

  var original_value = $('p').text();  // Get the original value before it changes.
  $("#discount").click(function() {
    var value = $('p').text();
    if ($('#discount').is(':checked')) {
      var intValue = parseInt(value)
      var percentValue = intValue-(intValue*15/100)
      $('p').text(percentValue)
    } else {
      $('p').text(original_value);    // Changed this line.
    }
  })

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>500</p>

<input type="checkbox" id="discount" name="discount" value="discount"> Discount

＆＃13;

Answer 5

您可以创建隐藏字段并将值保存在其中。

另一种方法是使用数学来获得实际值，而不将其存储在任何地方。

实际值=（折扣价值/（1-（百分比/ 100）））;

＆＃13;

  var discount = 15;
  $("#discount").click(function() {
    var value = $('p').text()
    if ($('#discount').is(':checked')) {
      var intValue = parseInt(value)
      var percentValue = intValue-(intValue*discount/100)
      $('p').text(percentValue)
    } else {
      $('p').text(value / (1-discount/100))
    }
  })

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>500</p>

<input type="checkbox" id="discount" name="discount" value="discount"> Discount

＆＃13;

Answer 6

简单的解决方案是采用全局变量并在进行任何计算之前将值赋给该变量。然后，如果取消选中该复选框，则可以设置该值，并且它可以完美地为您工作。

＆＃13;

var parsedAmount;
$("#discount").click(function() {
    value = $('p').text();
    debugger
    if ($('#discount').is(':checked')) {
      parsedAmount = parseInt(value)
      var percentValue = parsedAmount-(parsedAmount*15/100)
      $('p').text(percentValue)
    } else {
      $('p').text(parsedAmount)
    }
  })

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>500</p>

<input type="checkbox" id="discount" name="discount" value="discount"> Discount

＆＃13;

Answer 7

chart.redraw()

如何申请和删除折扣

7 个答案: