为了在Wordpress表单上显示/隐藏多个字段而使用条件语句的努力

Question

我的目标是在woocommerce产品页面上创建一个表单，当选中某个属性时，将显示更多选项。进一步来说。有一个问题：“您要购买几只狗？”如果选中“一个”，将显示带有标签“第二狗的名字：”的文本字段。如果选择了“两个”而不是“第二只狗的名字：”，并且将出现“第三只狗的名字：”。

这是我正在使用的代码，不能真正更改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>