Question

我是JS的新手，我正在尝试创建一个功能，该功能可以获取3种不同产品的价格和折扣价格（在功能中计算），并将价格填入每种产品的不同div。

我想将产品作为arg，然后根据我传入的产品名称将变量设置为不同的值。

到目前为止，这就是我所拥有的：

function getProductDiscount(product1, product2, product3) {

    var MSRPs = "";
    var MSRP = "";
    var listPrices = "";
    var listPrice = "";

    var productMSRP = "";

    if (product1) {

        productMSRP = $(".product1MSRP");

        // product1 MSRP depending on currency
        MSRPs = {"USD": 12.34, "CAD": 56.78, "GBP": 91.23};
        MSRP = MSRPs["{{ order.currency }}"];
        listPrices = {"USD": 22.34, "CAD": 66.78, "GBP": 111.23};
        listPrice = listPrices["{{ order.currency }}"];
    } if (product2) {

        productMSRP = $(".product2MSRP");

        // product2 MSRP depending on currency
        MSRPs = {"USD": 32.33, "CAD": 44.44, "GBP": 55.55};
        MSRP = MSRPs["{{ order.currency }}"];
        listPrices = {"USD": 66.66, "CAD": 77.77, "GBP": 88.88};
        listPrice = listPrices["{{ order.currency }}"];
    } if (product3) {

        productMSRP = $(".product3MSRP");

    // product3 MSRP depending on currency
        MSRPs = {"USD": 77.88, "CAD": 88.99, "GBP": 99.99};
        MSRP = MSRPs["{{ order.currency }}"];
        listPrices = {"USD": 111.99, "CAD": 122.99, "GBP": 133.99};
        listPrice = listPrices["{{ order.currency }}"];
    }

   $(".productSave").text(formatCurrencySym(MSRP - listPrice, "{{ order.currency }}"));

    productMSRP.text(formatCurrencySym(MSRP, "{{ order.currency }}"));

    $(".productDiscountPercent").text(Math.round((MSRP - listPrice) / MSRP * 100 / 5) * 5 + "%");

}


getProductDiscount(name1, name2, name3);

到目前为止，只有第三个价格填充了div。我知道这是因为它正在读取最后一个，但我不确定如何使用各自的值填充“.productFooMSRP”类。

**编辑**这是我试图用价格填充的div的HTML（页面上有2个）一个是“.product1MSRP”，另一个是“.product3MSRP”：

 <div class="col-sm-6 product-text">
     <img src="img.png" class="productImage">
          <div class="text-center">
              <p>{% trans "MSRP" %} <span class="product3MSRP"></span></p>
              <p class="red">{% trans "On Sale!" %}</p>
               <a role="button" href="" class="btn btn-default discountButton" role="button">
               {% blocktrans %}Get a <span class="productDiscountPercent">{% endblocktrans %}</span>
{% blocktrans %}Discount{% endblocktrans %}
                </a>
            </div>
        </div>

Answer 1

这是我的目的：

1）“只是让它工作” - 编辑你的功能，以便在已经跟踪的路径上实现你的结果

    function getProductDiscount(product1, product2, product3) {

      var MSRPs = "";
      var MSRP = "";
      var listPrices = "";
      var listPrice = "";

      var productMSRP = "";

      if (product1) {

        productMSRP = $(".product1MSRP");

        // product1 MSRP depending on currency
        MSRPs = {
          "USD": 12.34,
          "CAD": 56.78,
          "GBP": 91.23
        };
        MSRP = MSRPs["{{ order.currency }}"];
        listPrices = {
          "USD": 22.34,
          "CAD": 66.78,
          "GBP": 111.23
        };
        listPrice = listPrices["{{ order.currency }}"];

        //price show moved here
        productMSRP.text(formatCurrencySym(MSRP, "{{ order.currency }}"));
        //edited to match the specific product div 
        productMSRP.prev().parent().find(".productDiscountPercent").text(Math.round((MSRP - listPrice) / MSRP * 100 / 5) * 5 + "%");

      }
      if (product2) {

        productMSRP = $(".product2MSRP");

        // product2 MSRP depending on currency
        MSRPs = {
          "USD": 32.33,
          "CAD": 44.44,
          "GBP": 55.55
        };
        MSRP = MSRPs["{{ order.currency }}"];
        listPrices = {
          "USD": 66.66,
          "CAD": 77.77,
          "GBP": 88.88
        };
        listPrice = listPrices["{{ order.currency }}"];

        //price show moved here
        productMSRP.text(formatCurrencySym(MSRP, "{{ order.currency         }}"));
        //edited to match the specific product div 
        productMSRP.parent().parent().find(".productDiscountPercent").text(Math.round((MSRP - listPrice) / MSRP * 100 / 5) * 5 + "%");

      }
      if (product3) {

        productMSRP = $(".product3MSRP");

        // product3 MSRP depending on currency
        MSRPs = {
          "USD": 77.88,
          "CAD": 88.99,
          "GBP": 99.99
        };
        MSRP = MSRPs["{{ order.currency }}"];
        listPrices = {
          "USD": 111.99,
          "CAD": 122.99,
          "GBP": 133.99
        };
        listPrice = listPrices["{{ order.currency }}"];

        //price show moved here
        productMSRP.text(formatCurrencySym(MSRP, "{{ order.currency }}"));

        //edited to match the specific product div 
        productMSRP.parent().parent().find(".productDiscountPercent").text(Math.round((MSRP - listPrice) / MSRP * 100 / 5) * 5 + "%");

      }

      //ignored
      //$(".productSave").text(formatCurrencySym(MSRP - listPrice, "{{ order.currency }}"));

    }

    getProductDiscount(true, false, true);

正如您在函数调用中看到的那样，它不会指望任何参数，但会显示哪些产品。

https://jsfiddle.net/df9h6dub/

2）“主动” - 恕我直言，必须修改整个代码，使其更加简单灵活。

    function getProductDiscount(productMSRP, MSRPs, listPrices) {
      var MSRP = "";
      var listPrice = "";

        MSRP = MSRPs["{{ order.currency }}"];
        listPrice = listPrices["{{ order.currency }}"];
        productMSRP.text(formatCurrencySym(MSRP, "{{ order.currency }}"));
        //edited to match the specific product div 
        productMSRP.parent().parent().find(".productDiscountPercent").text(Math.round((MSRP - listPrice) / MSRP * 100 / 5) * 5 + "%");

    }


    //product1 parameters and function call
    p1MSRPel = $(".product1MSRP");

        p1MSRPs = {
          "USD": 12.34,
          "CAD": 56.78,
          "GBP": 91.23
        };
        p1listPrices = {
          "USD": 22.34,
          "CAD": 66.78,
          "GBP": 111.23
        };

    getProductDiscount(p1MSRPel, p1MSRPs, p1listPrices);


    //product3 parameters and function call
    p3MSRPel = $(".product3MSRP");

        p3MSRPs = {
          "USD": 77.88,
          "CAD": 88.99,
          "GBP": 99.99
        };
        p3listPrices = {
          "USD": 111.99,
          "CAD": 122.99,
          "GBP": 133.99
        };

    getProductDiscount(p3MSRPel, p3MSRPs, p3listPrices);

根据JS arg填充div

1 个答案: