Question

当客户选择一种送货方式时，我希望费用显示在结帐栏中。我遇到的问题是运费没有在结帐中显示。

这是我的javascript代码：

var shopcart = [];
$(document).ready(function () {
  outputCart();

  $(".productItem").click(function (e) {
    e.preventDefault();

    var itemInfo = $(this.dataset)[0];
    itemInfo.qty = 1;
    var itemInCart = false;

    $.each(shopcart, function (index, value) {
      //console.log(index + '  ' + value.id);
      if(value.id == itemInfo.id) {
        value.qty = parseInt(value.qty) + parseInt(itemInfo.qty);
        itemInCart = true;
      }
    })

    if(!itemInCart) {
      shopcart.push(itemInfo);
    }

    sessionStorage["sc"] = JSON.stringify(shopcart);
    outputCart();
  })

  function outputCart() {
    if(sessionStorage["sc"] != null) {
      shopcart = JSON.parse(sessionStorage["sc"].toString());
      //console.log(sessionStorage["sc"]);
      $('#checkoutdiv').show();
    }
    var vat25 = 0.20;
    var holderHTML = '';
    var subtotal = 0;
    var total = 899;
    var shippingLimit = 899;
    var shippingCost = 0 + ' kr';
    var itemCount = 0;

    $(".shippingBestTransport").click(function (e) {
      e.preventDefault();
      shippingCost = 89;
    })

    $.each(shopcart, function (index, value) {
      //console.log(value);
      var stotal = value.qty * value.price;
      subtotal += stotal;
      itemCount += parseInt(value.qty);
    })

    var totalShippingLimit = (shippingLimit - subtotal);
    if(totalShippingLimit < 0) {
      totalShippingLimit = 0;
    }

    if(itemCount != 1) {
      Countending = ' Varor';
    } else {
      Countending = ' Vara';
    }

    $('.subtotal').html(formatTotal(subtotal));
    $('.total').html(formatTotal(total));
    $('.vat').html(formatVAT(total*vat25));
    $('.shippingCost').html(shippingCost);
    $('.shippingLimit').html(formatFreight(totalShippingLimit));
    $('.items').html(itemCount + Countending);
  }

  function formatTotal(n) {
    return (n/1).toFixed(2) + ' kr';
  }

  function formatVAT(n) {
    return (n/1).toFixed(2) + ' kr';
  }

  function formatFreight(n) {
    return (n).toFixed(0) + ' kr';
  }

})

还有我的HTML：

<a href="#" class="a-black shippingBestTransport" data-name="Best Transport" data-price="89" data-id="1">
              <div class="col-sm-6">
                <div class="box">
                  <h4>Best Transport (Nästa dag)</h4>
                  <p>Beställ innan klockan 13:00 för att få leverans redan nästa dag när du väljer Best Transport.</p>
                  <div class="box-footer text-center">
                    <div class="col-md-12">
                      <div class="inputGroup">
                        <span class="pull-left"><i class="fa fa-check-square-o" aria-hidden="true"></i></span>
                        <span class="pull-right"><b>89 kr</b></span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </a>

因此，当用户按下“最佳运输”时，89的费用应出现在结帐处，但现在却没有。

$(".shippingBestTransport").click(function (e) { e.preventDefault(); shippingCost = 89; })

当用户按下类为"shippingBestTransport".的按钮时，代码的这一部分应该做出反应。结果应显示在这样的类中：

$('.shippingCost').html(shippingCost);

以下是将所有变量输出到结帐页面的代码：

<div class="table-responsive">
        <table class="table">
          <tbody>
            <tr>
              <td>Subtotal:</td>
              <td><span class="subtotal"></span></td>
            </tr>
            <tr>
              <td>Fraktkostnad:</td>
              <td><span class="shippingCost"></span></td>
            </tr>
            <tr>
              <td>Totalt:</td>
              <td><span class="total"></span></td>
            </tr>
            <tr>
              <td><em>Varav moms:</em></td>
              <td><span class="vat"></span></td>
            </tr>
          </tbody>
        </table>
      </div>

但是当代码的那部分应该返回实际的运输成本以便在结帐时显示时，它不会这样做。什么都没有显示，我也没有错误。

Answer 1

$(".shippingBestTransport").click(function (e) {
  e.preventDefault();
  shippingCost = 89;
})

此函数更新变量的值，但不执行任何操作以显示任何内容。现在，您必须更新DOM本身，例如：

$(".shippingBestTransport").click(function (e) {
  e.preventDefault();
  shippingCost = 89;
  $('.shippingCost').html(shippingCost);
})

另一个问题是，我在您的html中看不到任何类为shippingCost的元素，您忘记添加该类了吗？

Javascript增加运输费用

1 个答案: