борется с условными операторами, чтобы показать / скрыть несколько полей в форме WordPress - PullRequest
Новая
       58

борется с условными операторами, чтобы показать / скрыть несколько полей в форме WordPress

0 голосов
/ 05 апреля 2020

Моя цель состоит в том, чтобы на странице продукта 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>

Я знаю, что мне не хватает, вероятно, очень основы c, но я очень новичок в написании функций и сложных функций javascript / jquery условные утверждения, подобные этому. Заранее благодарим за любую помощь, которую вы можете мне оказать!

1 Ответ

0 голосов
/ 05 апреля 2020

Вот решение: 

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