Question

我有一些产品订单页面的表格。页面上的每个项目都需要有两个价格，一个用于一次性订单，另一个用于重复订单。

我的代码工作正常，问题是每个项目需要三个javascript函数，你可以猜测它们会快速失控。

以下是一种产品的表格：

<form id="mangoForm" action="https://ximo365.foxycart.com/cart" method="post" accept-charset="utf-8">

    <input type="hidden" name="name" value="Mango Bash Pack" />
    <input id="mango-price-input" type="hidden" name="price" value="50" />
    <input id="mango-sub-input" type="hidden" name="sub_frequency" value="1m"> 
    <input id="mango-refBy" type="hidden" name="Referred By:" value="Not Specified">

<div class="btn-group">
    <button type="button" onclick="changePriceLowMango()" class="btn btn-default">Subscribe & Save</button>
    <button type="button" onclick="changePriceHighMango()" class="btn btn-default">One Time</button>
    <button type="button" onclick="mangoSubmit()" class="btn btn-default" value="Submit form">Add To Cart</button>
</div>
</form>

她的形式是javascript：

function changePriceHighMango() {
   document.getElementById("mango-price").innerHTML = "80.00";
   document.getElementById("mango-price-desc").innerHTML = "Switch to recurring and save up to 35%!";
   document.getElementById("mango-price-input").value = "80.00";
   document.getElementById("mango-sub-input").name = "Frequency";
   document.getElementById("mango-sub-input").value = "Single Order";
}

function changePriceLowMango() {
   document.getElementById("mango-price").innerHTML = "50.00";
   document.getElementById("mango-price-desc").innerHTML = "Recurring Price. Cancel Anytime.";
   document.getElementById("mango-price-input").value = "50.00";
   document.getElementById("mango-sub-input").name = "sub_frequency";
   document.getElementById("mango-sub-input").value = "1m";
}

function mangoSubmit() {
   var mangoName = document.getElementById("distName").innerHTML;
   document.getElementById("mango-refBy").value = mangoName;
   document.getElementById("mangoForm").submit();
}

我想要的是三个功能 - 一个用于提高价格，一个用于降低价格，一个用于提交表单 - 这将适用于每个项目。这些功能需要知道要更改哪些表单，低价和高价是什么，以及要更新该表单上的哪些项目。

这有可能吗？

感谢您的帮助。

Answer 1

你可以试试这个：

function Mango(action) {
    var mangoprice = document.getElementById("mango-price"),
    mangopricedesc = document.getElementById("mango-price-desc"),
    mangopriceinput = document.getElementById("mango-price-input"),
    mangoprivesubinput = document.getElementById("mango-sub-input"),
    mangorefBy = document.getElementById("mango-refBy"),
    mangoForm = document.getElementById("mangoForm");
    var mangoName = document.getElementById("distName").innerHTML;
    switch(action)
    {
        case 'Low':
            mangoprice.innerHTML = "80.00";
            //... etc LOW PRICE
            break;
        case 'High':
            //... etc HIGH PRICE
            break;
        case 'Submit':
            mangorefBy.value = mangoName;
            mangoForm.submit();
            break;
    }
}

来自维也纳的问候

Answer 2

尽量保持你现在拥有的样式和代码，我只是将所有变量东西作为参数传递给更通用的changePrice函数。正如您所说，函数需要知道要更改哪些表单，低价和高价是什么，以及该表单上要更新的项目。所以让我们创建一个更通用的changePrice函数，如下所示：

  function changePrice(productName, description, price, subName, subValue) {
    document.getElementById(productName + "-price").innerHTML = price;
    document.getElementById(productName + "-price-desc").innerHTML = description;
    document.getElementById(productName + "-price-input").value = price;
    document.getElementById(productName + "-sub-input").name = subName;
    document.getElementById(productName + "-sub-input").value = subValue;
  }

  function productSubmit(productName) {
    var distName = document.getElementById("distName").innerHTML;
    document.getElementById(productName + "-refBy").value = distName;
    document.getElementById(productName + "Form").submit();
  }

我假设所有表单输入都以productName开头并具有相同的后缀（-price，-price-desc，-price-input，-sub-input和-sub-input）。

然后你可以通过调用带有正确参数的函数来更改按钮onclick属性。

  <div class="btn-group">
    <button type="button" onclick="changePrice('mango', 'Recurring Price. Cancel Anytime.', '50.00', 'sub_frequency', '1m')" class="btn btn-default">Subscribe & Save</button>
    <button type="button" onclick="changePrice('mango', 'Switch to recurring and save up to 35%!', '80.00', 'Frequency', 'Single Order')" class="btn btn-default">One Time</button>
    <button type="button" onclick="productSubmit('mango')" class="btn btn-default" value="Submit form">Add To Cart</button>
  </div>

** foo *产品的表格示例：

<form id="fooForm" action="https://ximo365.foxycart.com/cart" method="post" accept-charset="utf-8">

    <input type="hidden" name="name" value="Foo Bash Pack" />
    <input id="foo-price-input" type="hidden" name="price" value="50" />
    <input id="foo-sub-input" type="hidden" name="sub_frequency" value="1m"> 
    <input id="foo-refBy" type="hidden" name="Referred By:" value="Not Specified">

      <div class="btn-group">
        <button type="button" onclick="changePrice('foo', 'Foo Recurring Price. Cancel Anytime.', '10.00', 'sub_frequency', '1m')" class="btn btn-default">Subscribe & Save</button>
        <button type="button" onclick="changePrice('foo', 'Foo Switch to recurring and save up to 35%!', '20.00', 'Frequency', 'Single Order')" class="btn btn-default">One Time</button>
        <button type="button" onclick="productSubmit('foo')" class="btn btn-default" value="Submit form">Add To Cart</button>
      </div>
</form>

为多个表单使用一个javascript函数

2 个答案: