Question

我有一个订单页面，允许客户选择一个项目及其数量，然后计算一个div中订购的总金额。

这是我的代码：

对于数量jquery：

  <script> 
 $(function() {

 $(".numbers-row").append('<div class="inc button">+</div><div class="dec button">-</div>');

 $(".button").on("click", function() {

var $button = $(this);
var oldValue = $button.parent().find("input").val();

if ($button.text() == "+") {
  var newVal = parseFloat(oldValue) + "The Price";
} else {
   // Don't allow decrementing below zero
  if (oldValue > 0) {
    var newVal = parseFloat(oldValue) - "The Price";
    } else {
    newVal = 0;
  }
  }

$button.parent().find("input").val(newVal);

 });

  });

项目的HTML：

     <ul>
        <li class="numbers-row">
        <label>
        <input class="calc" type="checkbox" name="combos[]" id="item2-title"  value="The Name"/>
        The Thumbnail<p>The Title</p>
        <input type="hidden" name="item1-val" value="The Price">
        </label>
        </li>

        <li class="numbers-row">
        <label>
        <input class="calc" type="checkbox" name="combos[]" id="item2-title"  value="The Name"/>
        The Thumbnail<p>The Title</p>
        <input type="hidden" name="item2-val" value="The Price">
        </label>
        </li>

         <li class="numbers-row">
        <label>
        <input class="calc" type="checkbox" name="combos[]" id="item2-title"  value="The Name"/>
        The Thumbnail<p>The Title</p>
        <input type="hidden" name="item2-val" value="The Price">
        </label>
        </li>

    </ul>

我的jquery总数：

     <script type="text/javascript">
     function calcscore(){
          var score = 0;
            var checked=$(".calc:checked ~   input[type=hidden]").each(function(){
            score+=parseInt($(this).val());
            });
     $('#price').text(score.toFixed(2));
       }
      $(document).ready(function(){
      $(".calc").change(function(){
         calcscore()
     });
    });
     </script>

我的HTML将显示项目的总价格：

  <p>Total: PHP <span id="price">0</span></p>

我的问题如何链接所有这些？

实际上有更多的项目，但为了简化起见，我们将坚持使用3。

PS 我只有基本的jquery和PHP，但我可以复制粘贴到最少。任何输入都非常感谢。谢谢你们

Answer 1

首先让我们纠正第一部分：根据您想要实现的目标，不要一直使用var。使用严格比较===除了你想要特定的行为。

$(document).ready(function () {
    //You could put the div in your HTML directly to avoid the need for JS interpretation
    $(".numbers-row").append('<div class="inc button">+</div><div class="dec button">-</div>');

    $(".button").click(function (e) {

        var $button = $(e.target);
        var oldValue = $button.parent().find("input").val();
        var newVal;
        if ($button.text() === "+") {
            newVal = parseFloat(oldValue) + "The Price";
        } else if ($button.text() === "-") {
            // Don't allow decrementing below zero
            newVal = oldValue > 0 ? parseFloat(oldValue) - "The Price" : 0;
        } else {
            //Handle error
        }

        $button.parent().find("input").val(newVal);

    });
    function calcPrice() {
        var score = 0;
        //the next declaration seems very unreadable IMHO.
        var checked = $(".calc:checked~input[type=hidden]").each(function (elem) {
            price += parseInt(elem.val());
        });
        $('#price').text(price.toFixed(2));
    }
    $(".calc").change(function () {
        calcPrice();
    });
});

第二部分：我把它与第一个合并了。你不必调用document.ready。分数是一个价格？叫它价格！或者它变得难以理解。所有JS开发人员都坚持使用camelCase。别忘了;在行尾。另外，不要忘记在代码之前添加jQuery库。

如果我可以为您提供更多帮助，请在评论中告诉我。我没有尝试过这个。

在项目中添加 - / +增量然后总计它？

1 个答案: