Javascript 如何在YUI模块中运行代码?
我有一个页面,其中有产品图像(代表产品颜色)和产品颜色选择框。此页面是使用Squarespace Commerce和YUI构建的 如果使用选择框更改产品颜色,则会运行一些代码,更新javascript变量以反映所选产品 我试图改变页面,以便当用户选择图像时,选择框会自动更新。我已经成功地实现了这一点(选择框变为相关颜色),但有一个YUI模块,其中包含未运行的代码。这段代码更新javascript变量以反映所选产品 我试图通过触发选择框上的Javascript 如何在YUI模块中运行代码?,javascript,jquery,yui,Javascript,Jquery,Yui,我有一个页面,其中有产品图像(代表产品颜色)和产品颜色选择框。此页面是使用Squarespace Commerce和YUI构建的 如果使用选择框更改产品颜色,则会运行一些代码,更新javascript变量以反映所选产品 我试图改变页面,以便当用户选择图像时,选择框会自动更新。我已经成功地实现了这一点(选择框变为相关颜色),但有一个YUI模块,其中包含未运行的代码。这段代码更新javascript变量以反映所选产品 我试图通过触发选择框上的change事件来运行此代码,但没有任何影响 这是YUI代
change
事件来运行此代码,但没有任何影响
这是YUI代码:
YUI.add("squarespace-product-utils", function (a) {
a.Squarespace.ProductUtils = {
initializeVariantDropdowns: function () {
a.all(".product-variants[data-variants]").each(function (e) {
var b = JSON.parse(e.getAttribute("data-variants")),
c = e.all("select"),
d = e.siblings(".product-price").item(0),
g;
d && (g = d.getHTML());
a.Squarespace.ProductUtils._checkVariantStockAndPrice(e, b, c, d, g);
c.detach("change");
c.each(function (f) {
f.after("change", function (f) {
a.Squarespace.ProductUtils._checkVariantStockAndPrice(e, b, c, d, g)
}, this)
},
this)
}, this)
},
_checkVariantStockAndPrice: function (e, b, c, d, g) {
e.removeAttribute("data-unselected-options");
e.removeAttribute("data-selected-variant");
e.removeAttribute("data-variant-in-stock");
var f = e.one(".variant-out-of-stock");
f && f.remove();
var h = [],
f = null,
k = !1,
l = {};
c.each(function (a) {
var b = a.get("value");
a = a.getAttribute("data-variant-option-name");
"none" != b ? l[a] = b : h.push(a)
}, this);
if (0 === h.length) {
for (c = 0; c < b.length; c++) {
g = b[c];
var t = !0,
n;
for (n in l)
if (l[n] != g.attributes[n]) {
t = !1;
break
}
if (t) {
f =
g;
if (g.unlimited || 0 < g.qtyInStock) k = !0;
break
}
}!f && d ? d.set("text", "Unavailable") : d && (f.onSale ? (d.setHTML(a.Squarespace.Commerce.moneyString(f.salePrice)), d.append(a.Node.create('<span> </span><span class="original-price">' + a.Squarespace.Commerce.moneyString(f.price) + "</span>"))) : d.setHTML(a.Squarespace.Commerce.moneyString(f.price)));
f && !k && e.append(a.Node.create('<div class="variant-out-of-stock">Out of stock.</div>'))
} else d && d.getHTML() !== g && d.setHTML(g);
e.setAttribute("data-unselected-options",
JSON.stringify(h));
f && e.setAttribute("data-selected-variant", JSON.stringify(f));
k && e.setAttribute("data-variant-in-stock", k)
}
}
}, "1.0", {
requires: ["base", "node", "squarespace-commerce-utils"]
});
我的代码成功地更新了选择框,但它似乎没有触发更改事件。我想线索是关于f.after(“change”…
),但我对YUI一无所知,也找不到任何帮助
更新:如果我使用jQuery添加更改事件,它确实会触发更改事件,但它仍然不会触发YUI添加的更改事件
如何触发此代码
您可以看到正在运行的(失败的)代码。要触发YUI模块,请使用
use
函数,该函数引用如下原始实例:
YUI().use('squarespace-product-utils', function (a) {
a.Squarespace.ProductUtils.initializeVariantDropdowns();
});
YUI().use('squarespace-product-utils', function (a) {
a.Squarespace.ProductUtils.initializeVariantDropdowns();
});