Question

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

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

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

该页面可以[在此处看到] [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');

Answer 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
        }
    });
});

Answer 2

如果我正确理解了问题，则不需要第二个提货按钮。您需要做的只是在什么时候显示价格。每当单击长度，提货或交货或包裹按钮时，请检查是否满足所有必需条件以显示价格，然后显示价格。该检查可能类似于，如果选择了交货，那么还应该选择包裹，否则，如果选择了领取，则不需要包裹。

Answer 3

如果我理解正确的问题：

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

这是一种JS方式：

禁用在页面加载上“包”中的“拾取”按钮。

提货

启用中的“包裹”提货按钮

送货

禁用领取按钮

这是带有更简单HTML的示例代码（实时堆栈闪电：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;
    }
  });
});

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

3 个答案: