我怎样才能让这两个 javascript 代码一起工作？

Posted 2023-05-08

【中文标题】我怎样才能让这两个 javascript 代码一起工作？

【英文标题】：How can I get these two javascript codes to work together?

【发布时间】：2014-08-19 03:24:55

【问题描述】：

我使用 html 制作了一个表单。

一开始我觉得很简单。我的输入是用户输入的金额。然后我制作了 javascript 代码来根据用户输入的金额计算动态价格。代码如下：

<input class="typeahead" type="text" placeholder="Amount" name="Gift-Card Amount"/>

javascript：

jQuery("input[name='Gift-Card Amount']").change(function () 

    if (isNaN(parseFloat(this.value)) || !isFinite(this.value)) 
          jQuery(this).val('');
          return false;
   
        var calc = parseFloat(this.value) * 0.95;
        jQuery(this).parents("form").find("input[name='price']").val(calc);
    );

计算为常数 0.95。所以我添加了一个新的输入。店铺名称。因此用户可以输入商店名称。金额：

<input class="stores typeahead" type="text" placeholder="Stores" name="name"/>

而且我希望根据商店名称和数量更改价格。所以我创建了这个对象：

var stores = 
    "McDonalds" : .90,
    "Target" : .92,

 var storeName = jQuery(this).parents("form").find("input[name='name']").val();
 console.log(stores[storeName]);

因此，可以根据输入的商店名称将该值替换为预设值，而不是常数 0.95。我不知道如何让这两个一起工作。意思是，我如何重新编码第一个 javascript 以重新定义 var 存储值而不是 0.95？

【问题讨论】：

将商店查找放入change函数。完成。

jQuery(this).val('') 只是this.value = '' 的一种低效方式。不需要 parseFloat，this.value * 0.95 会返回一个数字。 jQuery(this).parents("form").find("input[name='price']").val(calc) 可以是this.form.price.value = calc，这样效率更高。 jQuery 并不总是更少的代码。

他不需要在this.value 上使用parseFloat()，因为this.value 是字符串，而不是数字？ @RobG

感谢您的反馈，但这不是我的问题。我需要知道如何让更改函数识别 var 存储值而不是 .95

@user3784824——这就是为什么它是一个评论。 :-) @NobleMushtak–不，乘法运算符* 会将字符串转换为数字（如果可以的话）。事实上，只计算价格并查看结果是否为 NaN 而不是测试输入更简单。

【参考方案1】：

jQuery("input[name='Gift-Card Amount']").change(function () 
    var amount = parseFloat(this.value);
    if (isNaN(amount) || !isFinite(amount)) 
        jQuery(this).val('');
        return false;
    
    var storeName = jQuery(this).parents("form").find("input[name='name']").val();
    if (storeName in stores) 
        var calc = amount * stores[storeName];
        jQuery(this).parents("form").find("input[name='price']").val(calc);
    
);

我还建议您将 Stores 从文本输入更改为 <select>。这样，您就不必依赖用户正确拼写 store，包括大小写。

<select name="name" class="storeName">
    <option value="">Please select a store</option>
    <option value=".90">McDonalds</option>
    <option value=".92">Target</option>
</select>

然后就可以使用了

var calc = parseFloat(jQuery(this).parents("form").find(".storeName").val());

【讨论】：

然后我会将存储值放在哪里？

我需要以另一种方式进行，即用户在商店中键入内容。稍后我可以返回并提醒用户他们输入了无效的商店名称。我喜欢你最初发布的内容。我只是不知道我现在把我的 var 存储值放在哪里了。

你可以把它放在你想要的任何地方。只是上面函数访问的一个全局变量。

你不知道这给我带来的偏头痛。你很容易就解决了。再次感谢。

【参考方案2】：

我会这样做：

function calcPrice(element) 
  // Use the element that called the listener to find the form
  var form = element.form;
  // Access form controls as named properties of the form
  var amt = form["Gift-Card Amount"].value;

  // Don't clear the value if it's not suitable, it's annoying
  // Let the user fix it themselves
  if (parseFloat(amt) != amt) 
    alert("Gift card amount is not a suitable value")
  

  // Set the price
  form.price.value = amt * form.store.value;


</script>

具有所有存储值的示例表单。这样，您可以在服务器获取所有相关值的情况下进行后备，您不依赖于客户端计算..

<form>
  Store:
  <select name="store" onchange="calcPrice(this)">
   <option value="0.90">McDonalds
   <option value="0.92">Target
  </select>
  <br>
  Gift card amount:
  <input name="Gift-Card Amount" onchange="calcPrice(this)">
  Price:
  <input name="price" readonly>
</form>

【讨论】：

这不能满足我的需要。不过我很感激。

【参考方案3】：

写一个可以返回正确值的小函数

function retrieveStoreValue(store)
      return stores[store];
 // be sure stores is defined before the first call of this one

并在您的更改函数中调用它

var storeName = jQuery(this).parents("form").find("input[name='name']").val();

var calc = parseFloat(this.value) * (retrieveStoreValue(storeName) );

【讨论】：

我想这样做。我在页面中的哪里存储商店值、.92...90 等？

从上到下的顺序是：var stores = .. |then -> function retrieveStoreValue().. |then -> your changehandler

返回stores[store]的函数效率低，使用stores[store]即可。