根据选项值匹配选择对象变量

时间:2014-12-11 17:31:28

标签: javascript variables object attributes option

寻找一些帮助,因为我对javaScript很新(我几天前才开始学习)。无论如何,我无法找到一个方法或函数来实际进行相应的var检查,并将相应的选定值作为我的selectedCheck在我的计算中运行。我将其设置为对象的原因是因为有几种类型的检查,每种检查都有不同的选项值,数量和价格。

无论如何,到目前为止,这是我的代码:

<select class="priceDrp5">
<option value="1785-00050/check-11">50</option>
<option selected="true" value="1785-00250/check-11">250</option>
<option value="1785-00500/check-11">500</option> 
<option value="1785-001000/check-11">1000</option>
<option value="1785-002000/check-11">2000</option>
</select>

<script>
function selectedCheck(current_quantity, current_price, projected_quantity, projected_price, optionValue) {
this.current_quantity = current_quantity;
this.current_price = current_price; 
this.projected_quantity = projected_quantity;
this.projected_price = projected_price;
this.optionValue = function getValueFromOption() {
var x = document.getElementsByTagName("option").each().getAttribute("value");
if (x === this.optionValue) { 

     /* Make the matching var check the selectedCheck */

    }
  };
}

/*Secure Plus Voucher Checks*/
var check_11_50 = new selectedCheck(50, 66.99, 250, 169.99, "1785-00050/check-11");
var check_11_250 = new selectedCheck(250, 169.99, 500, 230.99, "1785-00250/check-11");
var check_11_500 = new selectedCheck(500, 230.99, 1000, 327.99, "1785-00500/check-11");
var check_11_1000 = new selectedCheck(1000, 327.99, 2000, 514.99, "1785-01000/check-11");


/*Calculations*/
var current_pricepercheck = (selectedCheck.current_price - selectedCheck.current_quantity).toFixed(2);
var projected_pricepercheck = (selectedCheck.projected_price - selectedCheck.projected_quantity).toFixed(2);
var current_price_bulk = (selectedCheck.current_price / selectedCheck.current_quantity * selectedCheck.projected_quantity).toFixed(2);
var projected_price_bulk = (selectedCheck.projected_price / selectedCheck.projected_quantity * selectedCheck.projected_quantity ).toFixed(2); 
var savings = ( selectedCheck.current_price_bulk - selectedCheck.projected_price_bulk).toFixed(2);   
document.getElementById("savings").innerHTML = (savings.toFixed(2));
</script>

另外,如果我以迂回的方式处理这整件事,请告诉我。我总是乐于听取快捷方式。提前谢谢。

1 个答案:

答案 0 :(得分:0)

而不是稍后使用检查对象值进行计算,为什么不在实例化它们时执行这些操作。这肯定可以进一步优化,但它的工作原理!顺便说一句,正如你所看到的,我最终没有使用jquery。

小提琴(通常情况下)表现得很不稳定,所以我写了DEMO ON CODEPEN

var checks = {};
function selectedCheck(quantity, price, projectedQuantity, projectedPrice, itemNumber) {
  var check = {
    pricePerCheck: (price - quantity).toFixed(2),
    projectedPricePerCheck: (projectedPrice - projectedQuantity).toFixed(2),
    priceBulk: (price / quantity * projectedQuantity).toFixed(2),
    projectedPriceBulk: (projectedPrice / projectedQuantity * projectedQuantity).toFixed(2),
    getSavings: function() { return (this.priceBulk - this.projectedPriceBulk).toFixed(2) } 
  };

  checks[itemNumber] = check;
}

selectedCheck(50, 66.99, 250, 169.99, "1785-00050/check-11");
selectedCheck(250, 169.99, 500, 230.99, "1785-00250/check-11");
selectedCheck(500, 230.99, 1000, 327.99, "1785-00500/check-11");
selectedCheck(1000, 327.99, 2000, 514.99, "1785-01000/check-11");

document.addEventListener('DOMContentLoaded', function() {
  var priceDrpSelect = document.querySelector('.priceDrp5'),
      savings = document.getElementById("savings"),
      selectedCheck;
  console.log(JSON.stringify(checks, null, 4))
  priceDrpSelect.addEventListener('change', function(e) {
    var key = this.options[this.selectedIndex].getAttribute('value');
    selectedCheck = checks[key];
    savings.innerHTML = selectedCheck.getSavings();
  });
  priceDrpSelect.dispatchEvent(new Event('change'));
});