Question

我有4到5个多功能，基本上可以抓取4到5个输入文本框中输入的数量。这些函数的唯一区别是输入ID。

将这些结合起来并仍能实现所需输出的最佳方法是什么。

HTML CODE：

<ul class="men-sizes noul">
      <li><label><span>Mens X Small</span><input id="men_xs" type="text" name="men_xs" data-var="men_xs" class="amtbox" placeholder="quanity"  /></label></li>
      <li><label><span>Mens Small</span><input id="men_s" type="text" name="men_s" data-var="men_s" class="amtbox" placeholder="quanity" /></label></li>
      <li><label><span>Mens Medium</span><input id="men_m" type="text" name="men_m" data-var="men_m" class="amtbox" placeholder="quanity" /></label></li>
      <li><label><span>Mens Large</span><input id="men_l" type="text" name="men_l" data-var="men_l" class="amtbox" placeholder="quanity" /></label></li>
      <li><label><span>Mens X Large</span><input id="men_xl" type="text" name="men_xl" data-var="men_xl" class="amtbox" placeholder="quanity" /></label></li>     
</ul>

JavaScript的：

<script>
//getting qty for each size

function getMenXSQty()
{
var theForm = document.forms["quoteform"];
var quantity = theForm.elements["men_xs"];
var howmany_men_xs =0;
if(quantity.value!=""){var howmany_men_xs = parseInt(quantity.value);}
return howmany_men_xs;
}
function getMenSQty()
{
var theForm = document.forms["quoteform"];
var quantity = theForm.elements["men_s"];
var howmany_men_s =0;
if(quantity.value!=""){var howmany_men_s = parseInt(quantity.value);}
return howmany_men_s;
}
function getMenMQty()
{
var theForm = document.forms["quoteform"];
var quantity = theForm.elements["men_m"];
var howmany_men_m =0;
if(quantity.value!=""){var howmany_men_m = parseInt(quantity.value);}
return howmany_men_m;
}
function getMenLQty()
{
var theForm = document.forms["quoteform"];
var quantity = theForm.elements["men_l"];
var howmany_men_l =0;
if(quantity.value!=""){var howmany_men_l = parseInt(quantity.value);}
return howmany_men_l;
}
function getMenXLQty()
{
var theForm = document.forms["quoteform"];
var quantity = theForm.elements["men_xl"];
var howmany_men_xl =0;
if(quantity.value!=""){var howmany_men_xl = parseInt(quantity.value);}
return howmany_men_x;
}

// getting prices for each at different qty levels
function getMenXSPrice()
{
var men_xs_qty =  getMenXSQty();
var location_color_price = getLocationColorPrice();
var theForm = document.forms["quoteform"];
var price24 = parseFloat(theForm.elements["men_xsxl_price24"].value);
var price36 = parseFloat(theForm.elements["men_xsxl_price36"].value);
var price48 = parseFloat(theForm.elements["men_xsxl_price48"].value);
var price60 = parseFloat(theForm.elements["men_xsxl_price60"].value);
var price72 = parseFloat(theForm.elements["men_xsxl_price72"].value);
var price96 = parseFloat(theForm.elements["men_xsxl_price96"].value);
var price144 = parseFloat(theForm.elements["men_xsxl_price144"].value);
if(men_xs_qty <=24){
    var men_xs_totprice = men_xs_qty * price24;
}else if(men_xs_qty > 24 && men_xs_qty <=36){
        var men_xs_totprice = men_xs_qty * price36;
}else if(men_xs_qty > 36 && men_xs_qty <=48){
        var men_xs_totprice = men_xs_qty * price48;
}else if(men_xs_qty > 48 && men_xs_qty <=60){
        var men_xs_totprice = men_xs_qty * price60;
}else if(men_xs_qty > 60 && men_xs_qty <=72){
        var men_xs_totprice = men_xs_qty * price72;
}else if(men_xs_qty > 72 && men_xs_qty <=96){
        var men_xs_totprice = men_xs_qty * price96;
}else if(men_xs_qty > 96 && men_xs_qty <=144){
        var men_xs_totprice = men_xs_qty * price144;
}else{
        var men_xs_totprice = men_xs_qty * price144;
}
return men_xs_totprice;
}

</script>

在上面，我也使用getMenXSPrice（）这样的函数来计算Men's Small Price，Men's Medium，Men's L和Men's X-Large。正如您所看到的，它们非常相似，唯一的区别是元素ID。

感谢并感激。

Answer 1

您可以编写一个接受元素名称作为输入参数的函数，并返回元素的数量：

function getQtyforElement(elementName)
{
  var theForm = document.forms["quoteform"];
  var quantity = theForm.elements[elementName];
  var howmany =0;
  if(quantity.value!=""){var howmany = parseInt(quantity.value);}
  return howmany;
}

然后你这样称呼它：

 var men_xs_qty =  getQtyforElement("men_xs");

您的最终代码如下所示：

<script>
//getting qty for each size

function getQtyforElement(elementName)
{
  var theForm = document.forms["quoteform"];
  var quantity = theForm.elements[elementName];
  var howmany =0;
  if(quantity.value!=""){var howmany = parseInt(quantity.value);}
  return howmany;
}

// getting prices for each at different qty levels
function getMenXSPrice()
{
var men_xs_qty =  getQtyforElement("men_xs");
var location_color_price = getLocationColorPrice();
var theForm = document.forms["quoteform"];
var price24 = parseFloat(theForm.elements["men_xsxl_price24"].value);
var price36 = parseFloat(theForm.elements["men_xsxl_price36"].value);
var price48 = parseFloat(theForm.elements["men_xsxl_price48"].value);
var price60 = parseFloat(theForm.elements["men_xsxl_price60"].value);
var price72 = parseFloat(theForm.elements["men_xsxl_price72"].value);
var price96 = parseFloat(theForm.elements["men_xsxl_price96"].value);
var price144 = parseFloat(theForm.elements["men_xsxl_price144"].value);
if(men_xs_qty <=24){
    var men_xs_totprice = men_xs_qty * price24;
}else if(men_xs_qty > 24 && men_xs_qty <=36){
        var men_xs_totprice = men_xs_qty * price36;
}else if(men_xs_qty > 36 && men_xs_qty <=48){
        var men_xs_totprice = men_xs_qty * price48;
}else if(men_xs_qty > 48 && men_xs_qty <=60){
        var men_xs_totprice = men_xs_qty * price60;
}else if(men_xs_qty > 60 && men_xs_qty <=72){
        var men_xs_totprice = men_xs_qty * price72;
}else if(men_xs_qty > 72 && men_xs_qty <=96){
        var men_xs_totprice = men_xs_qty * price96;
}else if(men_xs_qty > 96 && men_xs_qty <=144){
        var men_xs_totprice = men_xs_qty * price144;
}else{
        var men_xs_totprice = men_xs_qty * price144;
}
return men_xs_totprice;
}

</script>

避免代码重复这些多个函数，除了元素ID之外做同样的事情

1 个答案: