Скрыть элемент с помощью JQuery и активировать кнопку

Question

Я делаю продукт с 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');

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

Если я правильно понял вопрос:

• Вы хотите скрыть кнопку «Пикап» в разделе «Пикап или доставка» при загрузке страницы
• Показывать кнопку «Пикап» в «Пакетах», когда Пользователь нажимает «Пикап» в разделе «Пикап или доставка».

Вот способ JS сделать это:

• Отключить кнопку Пикап в «Пакетах» при загрузке страницы .
• Включить Кнопка «Пикап» в «Пакетах», когда пользователь нажимает кнопку «1020 * Пикап » в «Пикап или доставка»
• Отключить Кнопка получения в «Пакетах», когда пользователь нажимает кнопку Доставка в «Получении или доставке»

Вот пример кода с более простым 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;
    }
  });
});

Answer 3

Если я правильно понял вопрос, Вам не нужна кнопка пикапа secomd. Все, что вам нужно сделать, это поиграться, когда показать цену. При каждом нажатии кнопки длины, самовывоза, доставки или упаковки проверьте, выполнены ли все необходимые условия, чтобы отобразить цену, а затем отобразите цену. Проверка может быть такой: если выбрана доставка, то следует также выбирать пакеты, в противном случае, если выбрана доставка, пакеты не требуются.