jQuery 当特定文本显示在另一个 div 中时替换 div 中的文本（动态更新的 Shopify 定价变体）

Question

我正在开发 Shopify 主题，并为不同的产品选项设置了变体。

当您使用下拉菜单在变体之间切换时，产品价格会动态更新。

我希望能够在主要价格旁边以其他货币显示价格。

我使用下面的 jQuery 来执行此操作，但价格不会实时更新 - 直到页面刷新（并且由于变体选择保持不变，价格会更新）。就是不刷新就不会实时更新。

if (jQuery(".product-price").html().indexOf('18.000 KD') != -1) {
    jQuery(".dollar-price").replaceWith(".86");
}

if (jQuery(".product-price").html().indexOf('19.000 KD') != -1) {
    jQuery(".dollar-price").replaceWith(".14");
}

if (jQuery(".product-price").html().indexOf('25.000 KD') != -1) {
    jQuery(".dollar-price").replaceWith(".80");
}

if (jQuery(".product-price").html().indexOf('26.000 KD') != -1) {
    jQuery(".dollar-price").replaceWith(".04");
}

更新版本，仍然无法运行：

$(document).ready(function(){
$(".single-option-selector").change(function(event) { //HERE IS WHERE YOUR DROPDOWN ID GOES
if (jQuery(".product-price").html().indexOf('18.000 KD') != -1) {
    jQuery(".dollar-price").replaceWith(".86");
}
if (jQuery(".product-price").html().indexOf('19.000 KD') != -1) {
    jQuery(".dollar-price").replaceWith(".14");
}
if (jQuery(".product-price").html().indexOf('25.000 KD') != -1) {
    jQuery(".dollar-price").replaceWith(".80");
}
if (jQuery(".product-price").html().indexOf('26.000 KD') != -1) {
    jQuery(".dollar-price").replaceWith(".04");
}
});
});

Answer 1

您需要运行更改下拉列表时的代码。像这样：

$("#yourDropdown").change(function(event) { //HERE IS WHERE YOUR DROPDOWN ID GOES

    if (jQuery(".product-price").html().indexOf('18.000 KD') != -1) {
    jQuery(".dollar-price").replaceWith(".86");
}

if (jQuery(".product-price").html().indexOf('19.000 KD') != -1) {
    jQuery(".dollar-price").replaceWith(".14");
}

if (jQuery(".product-price").html().indexOf('25.000 KD') != -1) {
    jQuery(".dollar-price").replaceWith(".80");
}

if (jQuery(".product-price").html().indexOf('26.000 KD') != -1) {
    jQuery(".dollar-price").replaceWith(".04");
}
});

确保所有这些都用 document.ready

包裹起来

jQuery 当特定文本显示在另一个 div 中时替换 div 中的文本（动态更新的 Shopify 定价变体）

jQuery to replace text in div when particular text is shown in another div (dynamically updated Shopify pricing variants)

javascript

jquery

shopify