时间戳

首页 > 解决方案 > 单击按钮和页面加载时隐藏元素

javascript - 单击按钮和页面加载时隐藏元素

问题描述

我无法解决我遇到的这个问题，我希望我的文章阅读起来不会太复杂。

我正在制作具有 3 个变量的产品。客户可以在我们的地方取货，或者我们可以交付产品。出于实际考虑，我们选择在那里销售的产品应该以包含 30、60 或 90 个产品的包装形式交付。

在显示价格之前，需要选择所有 3 个变量。所以问题来了。如果有人想在我们的地方取货，只需选择 2 个变量：长度（米）和取货或送货。但这不会付出代价。因此，我需要再次在“包裹”中插入“取货”以获得价格。

但我想在包裹中隐藏“接送”，所以我不会让访客感到困惑。该图像描述了我正在寻找的内容：

在此处输入图像描述

该页面的演示可以在这里看到

我在看CSS。那是我必须与javascript一起使用的东西，还是如何/如果可能的话？

<ul class="variable-items-wrapper button-variable-wrapper" data-attribute_name="attribute_pa_packages">
    <li data-wvstooltip="pickup" class="variable-item button-variable-item button-variable-item-pickup" title="pickup" data-value="pickup">
        <span class="variable-item-span variable-item-span-button">pickup</span>
    </li>
</ul>

<ul class="variable-items-wrapper button-variable-wrapper" data-attribute_name="attribute_pa_packages">
    <li data-wvstooltip="pickup" class="variable-item button-variable-item button-variable-item-pickup selected" title="pickup" data-value="pickup">
        <span class="variable-item-span variable-item-span-button">pickup</span></li>
    </li>
</ul>

最好的祝福。

标签： javascriptphpjquerycsswordpress

解决方案

您可以在每次用户单击“取货或送货”选项之一时收听，如果选择的选项是“取货”，请使用 JQuery 在“包裹”中选择“取货”选项。这是这个算法的实现。

jQuery("ul[data-attribute_name=attribute_pa_pickup-og-delivery] li").click(function(){
    var selectedDelivery = jQuery("ul[data-attribute_name=attribute_pa_pickup-og-delivery]").find("li.selected").attr("data-value");
    if (selectedDelivery == "pickup"){
        jQuery("ul[data-attribute_name=attribute_pa_packages] li[data-value=pickup] span").click();
        jQuery("ul[data-attribute_name=attribute_pa_packages] li[data-value=pickup]").hide(); // hide the "pickup" option in "Packages" if you like
    }
});

推荐阅读