Заполните div в зависимости от JS arg

Question

Я новичок в JS, и я пытаюсь создать функцию, которая берет цены и цены со скидками (рассчитанные в функции) для 3 различных продуктов и заполняет цены в разные div для каждого продукта.

Я хотел бы взять продукт в качестве аргумента, а затем установить переменные на разные значения в зависимости от имени продукта, который я передал.

Пока что вот что у меня есть:

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" их соответствующими значениями.

** Редактировать ** Вот HTML-код div, который я пытаюсь заполнить ценами (их 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);