8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

如何使用 jQuery 根据依赖关系隐藏产品变体?

coross24 2月前

27 0

我在 localhost 上使用带有 Hello Elementor 主题的 WooCommerce,并且我有几个用于产品变体的自定义字段。当不满足特定依赖条件时,我想隐藏变体。...

我在 localhost 上使用带有 Hello Elementor 主题的 WooCommerce,并且我有几个用于产品变体的自定义字段。当不满足特定依赖项条件时,我想隐藏变体。我使用以下 jQuery 代码来检查依赖项并切换可见性:

$('#product-variants .variant-card').each(function () {
    const $variant = $(this);
    const dependencies = ($variant.data('dependencies') || '').split(',').filter(Boolean);
    const allDependenciesMet = dependencies.every(dependencyIndex => {
        const dependentVariant = $('[data-variant-index="' + dependencyIndex + '"]');
        const quantity = parseInt(dependentVariant.find('input[type="range"]').val(), 10) || 0;
        return quantity > 0; // Check if quantity is more than 0
    });

    if (!allDependenciesMet) {
        $variant.hide(); // Hide variant if dependencies are not met
    } else {
        $variant.show(); // Show variant if all dependencies are met
    }
});

问题是,当页面加载时,变体首先正确隐藏,但随后显示属性几乎立即(不到一秒)快速变回阻止,导致变体重新出现。

我没有使用任何其他可能干扰此逻辑的插件,只有 woocommerce 安装在我的本地主机上。

  • 为什么显示属性会恢复为阻止?
  • 当变体的依赖关系不满足时,如何确保变体保持隐藏状态?

任何见解或解决方案都将不胜感激!

帖子版权声明 1、本帖标题:如何使用 jQuery 根据依赖关系隐藏产品变体?
    本站网址:http://xjnalaquan.com/
2、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5、站长邮箱:yeweds@126.com 除非注明,本帖由coross24在本站《wordpress》版块原创发布, 转载请注明出处!
最新回复 (0)
  • 尝试使用 MutationObserver 来监视 DOM 的变化,并确保在发生更改时重新应用可见性逻辑。类似于:

    $(document).ready(function () {
        function checkDependencies() {
            $('#product-variants .variant-card').each(function () {
                const $variant = $(this);
                const dependencies = ($variant.data('dependencies') || '').split(',').filter(Boolean);
                const allDependenciesMet = dependencies.every(dependencyIndex => {
                    const dependentVariant = $('[data-variant-index="' + dependencyIndex + '"]');
                    const quantity = parseInt(dependentVariant.find('input[type="range"]').val(), 10) || 0;
                    return quantity > 0; // Check if quantity is more than 0
                });
    
                if (!allDependenciesMet) {
                    $variant.hide(); // Hide variant if dependencies are not met
                } else {
                    $variant.show(); // Show variant if all dependencies are met
                }
            });
        }
    
        // Initial check
        checkDependencies();
    
        // Monitor changes in the product-variants container
        const targetNode = document.getElementById('product-variants');
        const config = { childList: true, subtree: true, attributes: true };
    
        const callback = function (mutationsList, observer) {
            checkDependencies();
        };
    
        const observer = new MutationObserver(callback);
        observer.observe(targetNode, config);
    });
    
返回
作者最近主题: