javascript - 字段值的乘法

标签 javascript jquery html

考虑以下代码，我想计算价格和数量字段的乘积。

每次我点击更新按钮，它都会显示 NAN。

对于数量字段，我使用加号和减号按钮来增加/减少数量。

我实际上不知道如何调试这个特定问题。

$('.btn-number').click(function(e) {
  e.preventDefault();

  fieldName = $(this).attr('data-field');
  type = $(this).attr('data-type');
  var input = $("input[name='" + fieldName + "']");
  var currentVal = parseInt(input.val());
  if (!isNaN(currentVal)) {
    if (type == 'minus') {

      if (currentVal > input.attr('min')) {
        input.val(currentVal - 1).change();
      }
      if (parseInt(input.val()) == input.attr('min')) {
        $(this).attr('disabled', true);
      }

    } else if (type == 'plus') {

      if (currentVal < input.attr('max')) {
        input.val(currentVal + 1).change();
      }
      if (parseInt(input.val()) == input.attr('max')) {
        $(this).attr('disabled', true);
      }

    }
  } else {
    input.val(0);
  }
});
$('.input-number').focusin(function() {
  $(this).data('oldValue', $(this).val());
});
$('.input-number').change(function() {

  minValue = parseInt($(this).attr('min'));
  maxValue = parseInt($(this).attr('max'));
  valueCurrent = parseInt($(this).val());

  name = $(this).attr('name');
  if (valueCurrent >= minValue) {
    $(".btn-number[data-type='minus'][data-field='" + name + "']").removeAttr('disabled')
  } else {

    $(this).val($(this).data('oldValue'));
  }
  if (valueCurrent <= maxValue) {
    $(".btn-number[data-type='plus'][data-field='" + name + "']").removeAttr('disabled')
  } else {

    $(this).val($(this).data('oldValue'));
  }


});
$(".input-number").keydown(function(e) {
  // Allow: backspace, delete, tab, escape, enter and .
  if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 190]) !== -1 ||
    // Allow: Ctrl+A
    (e.keyCode == 65 && e.ctrlKey === true) ||
    // Allow: home, end, left, right
    (e.keyCode >= 35 && e.keyCode <= 39)) {
    // let it happen, don't do anything
    return;
  }
  // Ensure that it is a number and stop the keypress
  if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
    e.preventDefault();
  }
});


function calculate() {
  var num1 = document.getElementById('PPRICE').value;
  var num2 = document.getElementById('QTY').value;
  var update = num1 * num2;
  document.getElementById("TOTAL").innerHTML = update;


}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellspacing="0" class="shop_table cart">
  <thead>
    <tr>
      <th class="product-id">Product Id</th>
      <th class="product-name">Product</th>
      <th class="product-price">Price</th>
      <th class="product-quantity">Quantity</th>
      <th class="product-subtotal">Total</th>
      <th class="product-remove">&nbsp;</th>
    </tr>
  </thead>
  <tbody>
    <tr class="cart_item">
      <td class="product-id" valign="center">
        <a title="Remove this item" class="remove" href="#">P521</a>
      </td>
      <td class="product-name" valign="middle">
        <a href="single-product.html">Ship Your Idea</a>
      </td>

      <td class="product-price" valign="middle">
        <span id="PPRICE" class="amount" value="15">$15.00</span>
      </td>

      <td class="product-quantity">
        <div class="quantity buttons_added">
          <input type="button" class="minus btn-number" value="-" data-type="minus" data-field="num">
          <input type="number" id="QTY" name="num" value="0" min="0" max="5" class="input-text qty text input-number" title="Qty">
          <input type="button" class="plus btn-number" value="+" data-type="plus" data-field="num"> &nbsp;ea.
        </div>

      </td>



      <td class="product-subtotal" valign="middle">
        <span id="TOTAL" class="amount">$15.00</span>
      </td>
      <td class="product-remove">
        <a title="Remove this item" class="remove" href="#">
          <span class="glyphicon glyphicon-trash"></span>
        </a>
      </td>
    </tr>
    <tr>
      <td class="actions" colspan="7">
        <div class="coupon" style="display: none;">
          <label for="coupon_code">Coupon:</label>
          <input type="text" placeholder="Coupon code" value="" id="coupon_code" class="input-text" name="coupon_code">
          <input type="submit" value="Apply Coupon" name="apply_coupon" class="button">
        </div>
        <input type="button" id="update" value="Update Cart" name="update_cart" class="button" onClick="calculate()">

      </td>
    </tr>
  </tbody>
</table>

最佳答案

span 没有 value 属性。更重要的是，作为 Javascript DOM 对象，span 没有value 属性(您可以通过 Javascript 添加该属性，但这只会让事情变得更加困难)。

相反，使用data-value 属性。 data- 属性已作为 任何 HTML 元素可用的通用属性引入。

您可以自由命名您的数据属性，只要它们的名称以data- 开头即可。在您的示例中，您还可以将其命名为 data-price 并使用 PPRICE.dataset.price 访问它。请注意，如果您使用的名称中包含多个破折号(例如 data-product-price)，破折号会在元素的 dataset 上自动转换为驼峰式命名法 (PPRICE.dataset.productPrice).

$('.btn-number').click(function(e) {
  e.preventDefault();

  fieldName = $(this).attr('data-field');
  type = $(this).attr('data-type');
  var input = $("input[name='" + fieldName + "']");
  var currentVal = parseInt(input.val());
  if (!isNaN(currentVal)) {
    if (type == 'minus') {

      if (currentVal > input.attr('min')) {
        input.val(currentVal - 1).change();
      }
      if (parseInt(input.val()) == input.attr('min')) {
        $(this).attr('disabled', true);
      }

    } else if (type == 'plus') {

      if (currentVal < input.attr('max')) {
        input.val(currentVal + 1).change();
      }
      if (parseInt(input.val()) == input.attr('max')) {
        $(this).attr('disabled', true);
      }

    }
  } else {
    input.val(0);
  }
});
$('.input-number').focusin(function() {
  $(this).data('oldValue', $(this).val());
});
$('.input-number').change(function() {

  minValue = parseInt($(this).attr('min'));
  maxValue = parseInt($(this).attr('max'));
  valueCurrent = parseInt($(this).val());

  name = $(this).attr('name');
  if (valueCurrent >= minValue) {
    $(".btn-number[data-type='minus'][data-field='" + name + "']").removeAttr('disabled')
  } else {

    $(this).val($(this).data('oldValue'));
  }
  if (valueCurrent <= maxValue) {
    $(".btn-number[data-type='plus'][data-field='" + name + "']").removeAttr('disabled')
  } else {

    $(this).val($(this).data('oldValue'));
  }


});
$(".input-number").keydown(function(e) {
  // Allow: backspace, delete, tab, escape, enter and .
  if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 190]) !== -1 ||
    // Allow: Ctrl+A
    (e.keyCode == 65 && e.ctrlKey === true) ||
    // Allow: home, end, left, right
    (e.keyCode >= 35 && e.keyCode <= 39)) {
    // let it happen, don't do anything
    return;
  }
  // Ensure that it is a number and stop the keypress
  if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
    e.preventDefault();
  }
});


function calculate() {
  var num1 = document.getElementById('PPRICE').dataset.value;
  var num2 = document.getElementById('QTY').value;
  var update = num1 * num2;
  document.getElementById("TOTAL").innerHTML = `$ ${update.toFixed(2)}`;


}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellspacing="0" class="shop_table cart">
  <thead>
    <tr>
      <th class="product-id">Product Id</th>
      <th class="product-name">Product</th>
      <th class="product-price">Price</th>
      <th class="product-quantity">Quantity</th>
      <th class="product-subtotal">Total</th>
      <th class="product-remove">&nbsp;</th>
    </tr>
  </thead>
  <tbody>
    <tr class="cart_item">
      <td class="product-id" valign="center">
        <a title="Remove this item" class="remove" href="#">P521</a>
      </td>
      <td class="product-name" valign="middle">
        <a href="single-product.html">Ship Your Idea</a>
      </td>

      <td class="product-price" valign="middle">
        <span id="PPRICE" class="amount" data-value="15">$15.00</span>
      </td>

      <td class="product-quantity">
        <div class="quantity buttons_added">
          <input type="button" class="minus btn-number" value="-" data-type="minus" data-field="num">
          <input type="number" id="QTY" name="num" value="0" min="0" max="5" class="input-text qty text input-number" title="Qty">
          <input type="button" class="plus btn-number" value="+" data-type="plus" data-field="num"> &nbsp;ea.
        </div>

      </td>



      <td class="product-subtotal" valign="middle">
        <span id="TOTAL" class="amount">$15.00</span>
      </td>
      <td class="product-remove">
        <a title="Remove this item" class="remove" href="#">
          <span class="glyphicon glyphicon-trash"></span>
        </a>
      </td>
    </tr>
    <tr>
      <td class="actions" colspan="7">
        <div class="coupon" style="display: none;">
          <label for="coupon_code">Coupon:</label>
          <input type="text" placeholder="Coupon code" value="" id="coupon_code" class="input-text" name="coupon_code">
          <input type="submit" value="Apply Coupon" name="apply_coupon" class="button">
        </div>
        <input type="button" id="update" value="Update Cart" name="update_cart" class="button" onClick="calculate()">

      </td>
    </tr>
  </tbody>
</table>

关于javascript - 字段值的乘法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51999653/

上一篇：javascript - HTML5 - html、前缀和元相关

下一篇：javascript - 单击输入的标签会触发两次单击

相关文章：

javascript - Backbone.js 模型数据检索

javascript - classList.add 有效，但切换不起作用

php - JQuery Checked Selector on a modal-box 并将其返回到页面上

css - 如何将一个容器放在另一个div之上

javascript - 使用 Javascript 从 HTML 中提取 <img> 标签

javascript - 在 Javascript 中三次错误尝试后触发重定向到表单提交页面

php - Backbone.js 序列化模型属性以进行同步

jquery - jqGrid tableToGrid - 如果表中没有找到行则显示消息

javascript - jquery调整窗口大小以适应内容

javascript - jQuery点击链接不工作

©2024 IT工具网  联系我们