更改选择框选项文本的 Jquery - 在 iOS 上不起作用

Question

在 Magento 电子商务网站上，具有不同价格的产品选项的当前默认行为是在选择下拉列表中显示价格差异，例如，蓝色 +£2，橙色 -£3。客户不想在这里出现这个。

我的 Magento 不够流利，无法通过 PHP 代码更改此设置，因此使用 JQuery 修改下拉列表中的文本。虽然这适用于我的 Windows 机器和 Android 手机，但它似乎不适用于 iPhone 和 iPad。 (不确定 Macbook 等)。第一次打开选择框时价格仍然存在，但下一次就消失了。所以代码确实有效，只是在打开之前没有。

require(["jquery"], function($) {
    $(document).ready(function() {
        // $('select.super-attribute-select').focus(function(){
            $('select.super-attribute-select').on('focus', function(){

            $('option').each(function(){
                var selectedOption = $(this).text();

                if (selectedOption.indexOf('+') > -1) {
                    selectedOption = selectedOption.substring(0, selectedOption.indexOf('+'));
                    $(this).text(selectedOption);
                } else if (selectedOption.indexOf('-') > -1) {
                    selectedOption = selectedOption.substring(0, selectedOption.indexOf('-'));
                    $(this).text(selectedOption);
                }
            });     
        });

    });
});

最初我有 .focus，但也尝试过 .on('focus') 版本，但都不起作用。

如果我输入$(".product-info-main .page-title-wrapper h1").css('color', '#485158');document.ready 后，H1 的颜色发生变化，因此正在查找代码。除了 focus 之外，我还应该使用其他东西来让它与 iOS 一起工作吗？

回答 - 我最终更改为 mousedown 而不是 focus，它现在似乎可以工作了。谢谢

Answer 1

尝试使用纯 JavaScript 代码来执行此操作。由于跨平台问题，使用 jquery 的某些功能可能无法实现。在事件上使用 JavaScript 的方式与 JQuery 略有不同。删除 $(document).ready 并确保使用函数重新启动 JQuery 代码。