使用条件语句在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>

​