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

Question

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

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

在显示价格之前，需要选择所有 3 个变量。那么问题来了。如果有人想在我们的地方取货，只需选择 2 个变量:长度(以米为单位)和取货或送货。但这不会给出价格。因此，我需要再次在“Packages” 中插入“Pickup” 以获得价格。

但我想在包裹中隐藏“pickup”，这样我就不会把访问者弄糊涂了。图片描述了我要找的东西:

页面演示 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
    }
});