Question

我正在一个Woocommerce网站上，我的客户希望这样做，以便如果选择“每个月” 单选按钮，则会出现 .wapf-wrapper

我尝试了多种解决方案，但是它们无法正常工作。这是我目前正在使用的代码：

$(document).ready(function() {
  $('input[name="convert_to_sub_36"]:radio').click(function() {
    var inputValue = $(this).attr("1_month");
    var targetBox = $("." + inputValue);
    $(".wapf-input").not(targetBox).hide();
    $(targetBox).show();
  });
});

.wapf-wrapper {
  display: none;
}

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>

<body>
  <span>Choose a purchase plan:</span>
  <ul class="wcsatt-options-product wcsatt-options-product--">
    <li class="one-time-option">
      <label>
                        <input type="radio" name="convert_to_sub_36" data-custom_data="[]" value="0" checked="checked">
                        <span class="one-time-option-details">one time</span>
                                            </label>
    </li>
    <li class="subscription-option">
      <label>
                        <input type="radio" name="convert_to_sub_36" value="1_month">
                        <span class="subscription-option-details"><span class="no-price subscription-price"><span class="subscription-details">every month</span></span></span>
                                            </label>
    </li>
  </ul>

  <div class="wapf-wrapper">
    <div class="wapf-field-group" data-group="74">

      <div class="wapf-field-row">
        <div class="wapf-field-container wapf-field-radio" style="width:100%;" for="5f87355d578fd">

          <div class="wapf-field-label wapf--above"><label><span>Agency</span></label></div>
          <div class="wapf-field-input">
            <div class="wapf-radios">
              <label for="71955" class="wapf-input-label"><input id="71955" name="wapf[field_5f87355d578fd]" class="wapf-input" type="radio" data-field-id="5f87355d578fd" value="mwh9o"><span class="wapf-label-text">Lifebridge</span></label>
              <label for="93527" class="wapf-input-label"><input id="93527" name="wapf[field_5f87355d578fd]" class="wapf-input" type="radio" data-field-id="5f87355d578fd" value="hrv77"><span class="wapf-label-text">Beverly Bootstraps</span></label>
            </div>
          </div>



        </div>
      </div>
    </div><input type="hidden" value="74" name="wapf_field_groups"></div>
</body>

</html>

您可以看到产品here。

Answer 1

使用香草JS（将其添加到JS文件的末尾）：

document.addEventListener("DOMContentLoaded", () => {
  const wapf = document.querySelector(".wapf-wrapper");

  document.addEventListener("click", (e) => {
    if (e.target && e.target.name == "convert_to_sub_36") {
      wapf.style.display = e.target.value === "1_month" ? "block" : "none";
    }
  });
});

您可以在此处看到它的运行情况-https://codepen.io/ivanduka/pen/eYzJBJv?editors=1111

Answer 2

您可以使用toggle并将其传递给布尔值（真/假）以显示/隐藏。

单行：$(".wapf-wrapper").toggle(($(this).val() == "1_month"));

我也将click事件更改为更改，因为那是单选/复选框的适当事件

$(document).ready(function() {
  $(document).on("change",'input[name="convert_to_sub_36"]',function() {
    $(".wapf-wrapper").toggle(($(this).val() == "1_month"));
    /*
    var inputValue = $(this).attr("1_month");
    var targetBox = $("." + inputValue);
    $(".wapf-input").not(targetBox).hide();
    $(targetBox).show();*/
  });
});

.wapf-wrapper {
  display: none;
}

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>

<body>
  <span>Choose a purchase plan:</span>
  <ul class="wcsatt-options-product wcsatt-options-product--">
    <li class="one-time-option">
      <label>
                        <input type="radio" name="convert_to_sub_36" data-custom_data="[]" value="0" checked="checked">
                        <span class="one-time-option-details">one time</span>
                                            </label>
    </li>
    <li class="subscription-option">
      <label>
                        <input type="radio" name="convert_to_sub_36" value="1_month">
                        <span class="subscription-option-details"><span class="no-price subscription-price"><span class="subscription-details">every month</span></span></span>
                                            </label>
    </li>
  </ul>

  <div class="wapf-wrapper">
    <div class="wapf-field-group" data-group="74">

      <div class="wapf-field-row">
        <div class="wapf-field-container wapf-field-radio" style="width:100%;" for="5f87355d578fd">

          <div class="wapf-field-label wapf--above"><label><span>Agency</span></label></div>
          <div class="wapf-field-input">
            <div class="wapf-radios">
              <label for="71955" class="wapf-input-label"><input id="71955" name="wapf[field_5f87355d578fd]" class="wapf-input" type="radio" data-field-id="5f87355d578fd" value="mwh9o"><span class="wapf-label-text">Lifebridge</span></label>
              <label for="93527" class="wapf-input-label"><input id="93527" name="wapf[field_5f87355d578fd]" class="wapf-input" type="radio" data-field-id="5f87355d578fd" value="hrv77"><span class="wapf-label-text">Beverly Bootstraps</span></label>
            </div>
          </div>



        </div>
      </div>
    </div><input type="hidden" value="74" name="wapf_field_groups"></div>
</body>

</html>

基于无线电选择的显示字段

2 个答案: