努力使用条件语句在 wordpress 表单上显示/隐藏多个字段

Question

我的目标是在Woocommerce产品页面上具有表单，当检查某个属性时，然后将显示更多选项。 进一步来说。有一个问题： “你又要买多少只狗？”如果选中“one”，则会出现一个带有标签的文本字段：“Second Dog's Name:”。如果选择“two”，则会出现“Second Dog's Name:”和“Third Dog's Name:”。

这是我正在使用的代码，无法真正更改 html 结构，因为它是使用 wordpress 插件构建的，用于 woocommerce 中的额外产品选项。

我能够得到这个关闭，在选择第四个选项时，它会做我想要的，并且显示所有三个，但前三个选项都没有。但是当我编写每个代码时，它们会一直工作到我编写下一个代码。

$('.form-control').on('change', function () {
    if(this.value === "option-1"){
        $(".form-control-2_parent").show();
    } else {
        $(".form-control-2_parent").hide();
    }
});

$('.form-control').on('change', function () {
    if(this.value === "option-2"){
        $(".form-control-2_parent").show();
         $(".form-control-3_parent").show();
    } else {
        $(".form-control-2_parent").hide();
         $(".form-control-3_parent").hide();
    }
});

$('.form-control').on('change', function () {
    if(this.value === "option-3"){
        $(".form-control-2_parent").show();
         $(".form-control-3_parent").show();
         $(".form-control-4_parent").show();
    } else {
        $(".form-control-2_parent").hide();
         $(".form-control-3_parent").hide();
          $(".form-control-4_parent").hide();
    }
});

.form-control-2_parent{
   display:none;
 }
 
  .form-control-3_parent{
   display:none;
 }
 
  .form-control-4_parent{
   display:none;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="wcpa_form_item wcpa_type_select  form-control_parent">
  <label for="select-1586051219224">Number of Additional Dogs:</label>
  <div class="select">
    <select name="select-1586051219224" class="form-control ">
      <option value="no-addtional">No Additional Dogs</option>
      <option value="option-1">One Additional Dog</option>
      <option value="option-2">Two Additional Dogs</option>
      <option value="option-3">Three Additional Dog</option>
    </select>
    <div class="select_arrow"></div>
  </div>
</div>
<div class="wcpa_form_item wcpa_type_text  form-control-2_parent">
  <label for="text-1586038514482">Second Dog's Name</label>
  <input type="text" id="text-1586038514482" class="form-control-2 " name="text-1586038514482" value="" />
</div>
<div class="wcpa_form_item wcpa_type_text  form-control-3_parent">
  <label for="text-1586038517583">Third Dog's Name</label>
  <input type="text" id="text-1586038517583" class="form-control-3 " name="text-1586038517583" value="" /></div>
<div class="wcpa_form_item wcpa_type_text  form-control-4_parent">
<label for="text-1586038516041">Fourth Dog's Name</label>
<input type="text" id="text-1586038516041" class="form-control-4 " name="text-1586038516041" value="" /></div>

我知道我缺少的可能是非常基本的，但我对编写 javascript/jquery 函数和像这样的复杂条件语句非常陌生。 提前感谢您能给我的任何帮助！

Answer 1

解决办法如下：

// First store all out option's Elements on a list
var options = [
  $(".form-control-2_parent"),
  $(".form-control-3_parent"),
  $(".form-control-4_parent")
]

// Create a function that hides all our options 
function resetAll(){
  options.forEach(function(option){
    option.hide();
  });
}

$('.form-control').on('change', 
  function (event) 
  {
    // Get the option that was clicked
    var target = $(event.currentTarget);
    if(target.val())
    {
      //  First Hide all our options, this will hide any open ones
      resetAll();
      // Just create a loop that shows the number of options based on the selected option
      var i = 0;
      while(i < target.val()){
        options[i].show();
        i++;
      }
    }
  }
);

.form-control-2_parent{
   display:none;
 }
 
  .form-control-3_parent{
   display:none;
 }
 
  .form-control-4_parent{
   display:none;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="wcpa_form_item wcpa_type_select  form-control_parent">
  <label for="select-1586051219224">Number of Additional Dogs:</label>
  <div class="select">
    <select name="select-1586051219224" class="form-control ">
      <option value="no-addtional">No Additional Dogs</option>
      <option value="1">One Additional Dog</option>
      <option value="2">Two Additional Dogs</option>
      <option value="3">Three Additional Dog</option>
    </select>
    <div class="select_arrow"></div>
  </div>
</div>
<div class="wcpa_form_item wcpa_type_text  form-control-2_parent">
  <label for="text-1586038514482">Second Dog's Name</label>
  <input type="text" id="text-1586038514482" class="form-control-2 " name="text-1586038514482" value="" />
</div>
<div class="wcpa_form_item wcpa_type_text  form-control-3_parent">
  <label for="text-1586038517583">Third Dog's Name</label>
  <input type="text" id="text-1586038517583" class="form-control-3 " name="text-1586038517583" value="" /></div>
<div class="wcpa_form_item wcpa_type_text  form-control-4_parent">
<label for="text-1586038516041">Fourth Dog's Name</label>
<input type="text" id="text-1586038516041" class="form-control-4 " name="text-1586038516041" value="" /></div>