javascript - 触发输入变化

Question

我编写了一些代码来更改 magento 1.9 电子商务网站上的输入数量。

jQuery("input.qty").val("10");

问题是触发总数更新的 JavaScript 没有触发。我找到了负责的代码，它看起来像这样:

(function() {
  var qtyFields = $('super-product-list').select('input.qty');
  qtyFields.each(function(el) {
    el.observe("change", updateGroupedPrice);

  });

  Event.observe(window, "load", updateGroupedPrice);

  function updateGroupedPrice() {
    //do stuff
  }
})();

我认为这是使用prototype.js，但我试图将它隔离在codepen中，但无法让它工作。

我尝试像这样触发更改事件:

jQuery("input.qty").trigger("change")

但是它不起作用。我还运行了许多其他事件，但在开发工具中它显示了监听“更改”的代码。

有谁知道为什么我无法触发更改？

Answer 1

由于该页面使用 Prototype.js，因此您应该继续使用它来触发更改。如果您将 jQuery 引入其中，那么您 a) 加载 Prototype 已经执行的操作的另一个完整副本，并且 b) 会遇到很多麻烦来隔离 $() 是两者中的方法的事实图书馆。

你的 jQuery 对我来说也有点可疑。您正在设置一个选择器的值(我想)，但您正在使用类名对其进行寻址，因此页面中可能有多个 select.qty，并且所有这些都会发生变化设为值 10，(可能)触发多个回调函数。

您在此处看到的原型(prototype)代码正在设置一个“监听器”，用于更改您在 jQuery 中作为 $(#super-product-list input.qty) 输入处理的内容。

jQuery 始终将 $() 视为返回一组对象，因此它的所有方法都作用于该数组，即使它只包含一个成员。 Prototype 有两种不同的方法来访问 DOM 中的元素:$('some_id')，它始终返回一个元素(如果不匹配，则不返回任何元素)，以及 $$('some css选择器')，它总是返回一个数组(包含零个或多个匹配元素)。您可以以不同的方式编写(或使用 native )回调方法，具体取决于您用来收集元素的访问器。

如果您想更改这些输入之一，则需要在设置其值之前将其隔离。

假设您的 #super-product-list 元素中有三个类名为 qty 的选择器。您想将第三个更改为 10:

$('super-product-list').select('input.qty').last().setValue('10');

或者，比这更聪明的是，您向第三个 ID 添加一个 ID，然后您的代码就会短得多:

$('quantity_3').setValue('10');

无论哪种情况，这都会从您的选择发送“change”事件，并且 updateGroupedPrice 方法将观察该事件并执行您编写的代码执行的操作。

您不需要(也不应该)触发 change 事件——这是一个“ native ”事件，浏览器拥有它。 jQuery 的 trigger() (在 Prototype 中是 fire()，专门用于“合成事件”，就像您在 Bootstrap 中看到的那样:show.bs.modal 、hide.bs.modal 等。您可以通过名称中的标点符号来识别它们；通常使用点或冒号来命名事件并避免与其他代码发生冲突。

最后，如果您真的、真的、真的想将整个页面上的每个 #super-product-list select.qty 元素更改为“10”，您可以在 Prototype 中执行此操作。 js:

$$('#super-product-list select.qty').invoke('setValue', 10);