使用 JQuery 隐藏元素并激活按钮答案

【问题标题】：Hide element with JQuery and activate button使用 JQuery 隐藏元素并激活按钮
【发布时间】：2019-10-15 23:44:44
【问题描述】：

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

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

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

该页面可以[在这里看到][2]

这是我到现在为止的代码，但正如我所见，要么我的代码没有执行，要么代码完全错误。该页面看起来与我将代码添加到functions.php之前完全相同，并且没有执行任何函数。

根据我的描述，有人知道我的代码有什么问题吗？

HTML：

<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>

PHP 和脚本：

function custom_script_name(){
    ?>
    <script>
    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
        }
    });
    </script>
    <?php
    }
    add_action('wp_head', 'custom_script_name');

【问题讨论】：

如果您提供取货和送货的下拉菜单并根据您的选择显示更多选项，这很容易。
感谢您的评论。我需要将其保留为按钮，因为客户需要这样做。 Wordpress 中没有条件逻辑。然后你需要购买客户不想要的重力表格等。因此，我正在尽力寻找替代解决方案:-)
不明白是什么问题？
感谢您的评论@stefo91。如果我不够清楚，我很抱歉。我刚刚再次更新了我的问题，我希望它更清楚。
您可以添加 display: none 到包裹拾取或添加一个 css 类到他们有 display: none;然后通过jquery检查是否有人从“提货”中点击以显示从包裹中提货

标签： javascript php jquery css wordpress

【解决方案1】：

您可以尝试下面的代码，它会隐藏按钮，但在点击拾取时，它会被选中。只需更新 jquery 并尝试一次。希望一切顺利

jQuery(document).ready(function(){
     jQuery("ul[data-attribute_name=attribute_pa_packages] li[data-value=pickup]").hide();
    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
        }
    });
});

【讨论】：

非常感谢 Alfaraz 的回答。我只是尝试使用您的代码更新functions.php，但可以看到它没有做任何事情。我添加的代码是这样的：paiza.io/projects/yCxqHpYXRidzwHiAyd1yDQ。你知道这是为什么吗？如果您可以访问我的 Wordpress，您能更好地帮助我吗？最好的问候。
是的，如果你给我 wordpress 网站访问权限，我会帮助你。
非常感谢。我可以在哪里为您发送登录详细信息？
你可以在这里发给我，或者如果你想通过 Skype 发给我。 ?
写代码的时候请写在这里，我可以再次删除评论。在我上线之前这是一个测试站点

【解决方案2】：

如果我正确理解了这个问题，您不需要第二个拾取按钮。您需要做的就是考虑何时显示价格。每当单击长度、取货或交货或包裹按钮时，检查是否满足显示价格所需的所有条件，然后显示价格。检查可以是，如果选择了送货，则还应选择包裹，否则，如果选择了取货，则不需要包裹。

【讨论】：

感谢您的建议。是的，这是真的。我更多的是寻找一些代码建议，或者我的代码有什么问题。

【解决方案3】：

如果我理解的问题正确：

您想在页面加载时隐藏“取件或送货”中的取件按钮
当用户从“取件或送货”中点击取件时，在“包裹”中显示取件按钮。

这是一种 JS 的做法：

在页面加载上禁用“包裹”中的取件按钮。
当用户点击“Pickup or Delivery”中的Pickup按钮时，启用“Packages”中的Pickup按钮
禁用当用户点击“Pickup or Delivery”中的Delivery按钮时“Packages”中的 Pickup 按钮

这是一个带有更简单 HTML 的示例代码（Live stackblitz：https://stackblitz.com/edit/js-l9ddiq）：

<div>
  <span>Length</span>
  <button>4.2m</button>
  <button>5.1m</buton>
</div>

<div>
  <span>Pickup or delivery</span>
  <button id="pickup-button">Pickup</button>
  <button id="delivery-button">Delivery</buton>
</div>

<div id="packages">
  <span>Packages</span>
  <button class="toggle-button" style="display: none;">Pickup</button>
  <button>30</button>
  <button>60</button>
  <button>90</button>
</div>

JS：

const pickUpButton = document.getElementById('pickup-button');
pickUpButton.addEventListener('click', event => {
  const packageButtons = document.querySelector('#packages').querySelectorAll('button');
  packageButtons.forEach(button => {
    if (button.classList.contains('toggle-button')) {
      button.style.display = 'block';
    } else {
      button.disabled = true;
    }
  });
});

const deliveryButton = document.getElementById('delivery-button');
deliveryButton.addEventListener('click', event => {
  const packageButtons = document.querySelector('#packages').querySelectorAll('button');
  packageButtons.forEach(button => {
    if (button.classList.contains('toggle-button')) {
      button.style.display = 'none';
    } else {
      button.disabled = false;
    }
  });
});

【讨论】：