时间戳

首页 > 解决方案 > 努力使用条件语句在 wordpress 表单上显示/隐藏多个字段

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

问题描述

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

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

I am able to get this close where when the fourth option is selected it does what I want and shows all three, but the first three options do nothing. 但是当我编写每个代码时，它们会一直工作到我编写下一个代码。

$('.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 函数和像这样的复杂条件语句非常陌生。提前感谢您能给我的任何帮助！

标签： javascriptjqueryconditional-statementsshow-hideform-fields

解决方案

这是解决方案：

// 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>

推荐阅读