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

Question

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

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

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