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

我无法解决这个问题，我希望我的写作不要太复杂

我正在制作一个有3个变量的产品。客户可以在我们这里取货，也可以由我们送货。由于实际情况，我们选择在那里销售产品，应以30、60或90件产品的包装交付

在显示价格之前，需要选择所有3个变量。所以问题来了。如果一个人想在我们这里提货，只需选择两个变量：长度（以m为单位）和提货或交货。但这不会给你一个代价。因此，我需要在“套餐”中再次插入“收货”以获取价格

但是我想把“皮卡”藏在包裹里，这样我就不会把访问者弄糊涂了。图中描述了我正在寻找的内容：

页面的演示

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

改善




皮卡

---

致以最诚挚的问候。

每当用户单击其中一个“收货或送货”选项时，您都可以收听，如果所选选项为“收货”，请使用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
    }
});

---

我会更深入地研究为什么只选择这两个选项不会让你继续。在业务逻辑场景中，它更有意义。特别是如果你在“包裹”区域选择取货，它实际上会锁定送货选项，如果你改变主意，就会迫使你重新装货。如果没有更多的代码或示例，就很难知道到底发生了什么，请您提供更多验证和表单提交的片段，以便我们了解其中断的原因。非常感谢您的回答@Parham。所以我需要包装一些php并将其添加到我的子主题中的functions.php中，对吗？@Mv27不，这些代码是Javascript/Jquery。1） 您应该使用这些代码创建一个Js文件。2） 在子主题中编辑function.php，并将此js文件排入主题。