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

Question

我无法解决我遇到的这个问题，希望我的写作不会太复杂。

我正在制作具有3个变量的产品。客户可以在我们的地方提货，或者我们可以交付产品。由于实际情况，我们选择出售产品，应打包出售30，60或90种产品。

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

但是我想在包裹中隐藏“提货”，所以我不会使访问者感到困惑。图片描述了我要寻找的东西：

页面can be seen here的演示

我正在看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>

最诚挚的问候。

Answer 1

您可以每次用户单击“提货或交付”选项之一时进行监听，如果所选选项是“提货”，请使用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
    }
});