时间戳

首页 > 解决方案 > Javascript添加运费

javascript - Javascript添加运费

问题描述

当客户选择运输方式时，我希望费用显示在结帐中。我遇到的问题是运费没有出现在结帐中。

这是我的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>

因此，当用户按下“Best Transport”时，结账时应该会显示 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>

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

标签： javascriptjqueryhtml

解决方案

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

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

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

另一个问题是我shippingCost在您的 html 中没有看到任何带有类的元素，您是否忘记添加该类？

推荐阅读