javascript - 如何根据计数为对象设置显示 block

Question

我有一份预订航类表格，其中包含 child 旅客的人数。

有 3 个选择来定义每次旅行的年龄，但我为它们设置了display:none。

我编写了以下代码，但我不知道如何根据每次为每次旅行添加号码来显示每个选择。

例如，当用户添加 1 次旅行时，我想显示第一个选择。 2 显示第二个选择。

我想根据类名 travel 的值的增量和减量来显示每个 select。

我该怎么做？

这是我的片段:

  $(function() {
  $(".button-click a").on("click", function() {
    var button = $(this);
    var oldVal = parseInt(button.closest("ul").prev().val());
    var newVal = (button.text() == "+") ? oldVal+1: (oldVal > 0) ? oldVal-1 : 0;
    var total_value = "";
    
    button.closest("ul").prev().val(newVal);

    $(".travel").each(function(){
      var cat = $(this).prev('span').text();
      total_value += cat + ": " + $(this).val() + ", "; 
    });
    
    total_value = total_value.substring(0, total_value.length - 2);
    $(".main").val(total_value);
  })
})

.childs{ display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label>
Count all1 Traveller(s)
<input type="text" name="no_travellers" class="main" value="Adults: 1" placeholder="" />
</label>
<br/>
<label>
   <span>Children</span>
   <input type="text" class="travel" id="CAT_Custom_410672" name="CAT_Custom_410672"  value="0" />
   <ul class="button-group button-click">
      <li><a href="#" class="small button secondary"><i class="fa fa-plus"><span class="hide">+</span></i></a></li>
      <li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a></li>
   </ul>
</label>
<div class="childs">
   <label>Child1</label>
   <select>
      <option value="1">1</option>
      <option value="2">2</option>
   </select>
</div>
<div class="childs">
   <label>Child2</label>
   <select>
      <option value="1">1</option>
      <option value="2">2</option>
   </select>
</div>

Answer 1

这是许多可能的方法之一。基本上你想要的是:

1. 创建一个通用函数，当子项数量增加时，该函数可以为子项下拉列表生成必要的标记。我们称之为createChildDropdown(i)

   • 此函数将接收一个索引(新子项计数)，以便我们可以生成具有唯一 ID 的唯一字段

2. 创建一个通用函数，可以在子项数量减少时删除生成的子项下拉列表。我们称之为destroyChildDropdown($el, i)

   • 此函数将再次接收索引(新的子项计数)，以便我们可以删除正确的子项下拉列表
   • 它还接收一个 jQuery 选择器，以便知道从哪个元素中删除子下拉列表

现在我们已经有了逻辑，我们可以简单地检查 newVal与oldVal相比了解 child 的数量是否增加，并调用正确的函数。假设我们创建一个名为 <div class="childDropdowns"> 的新元素要保存所有下拉菜单，我们可以这样做:

if (oldVal < newVal) {
  $('.childDropdowns').append(createChildDropdown(newVal));
} else if (oldVal > newVal) {
  destroyChildDropdown($('.childDropdowns'), newVal);
}

$(function() {

  // Function to create child dropdown
  var createChildDropdown = function(i) {
  
    // Create a div in the following format:
    // <div class="childs">
    //    <label for="...">Child (number)</label>
    //    <select id="..."></select>
    // </div>
    var $childDropdown = $('<div />', {
      'class': 'childs'
    });
    $childDropdown.append($('<label />', {
      'for': 'childDropdown-' + i
    }).text('Child ' + i));
    $childDropdown.append($('<select />', {
      'id': 'childDropdown-' + i
    }));
    
    // Define options made available for each child
    var options = ['a', 'b', 'c'];
    options.forEach(function(option) {
      // Create new option element and append to <select>
      $childDropdown.find('select').append($('<option />').text(option).attr('value', option));
    });
    
    // Return documentFragment so that we can append it
    return $childDropdown;
  };
  
  // Function to destroy child dropdown
  var destroyChildDropdown = function($el, i) {
    $el.find('div.childs').get(i).remove();
  };

  $(".button-click a").on("click", function() {
    var button = $(this);
    var oldVal = parseInt(button.closest("ul").prev().val());
    var newVal = (button.text() == "+") ? oldVal + 1 : (oldVal > 0) ? oldVal - 1 : 0;
    var total_value = "";

    button.closest("ul").prev().val(newVal);

    $(".travel").each(function() {
      var cat = $(this).prev('span').text();
      total_value += cat + ": " + $(this).val() + ", ";
    });

    if (oldVal < newVal) {
      $('.childDropdowns').append(createChildDropdown(newVal));
    } else if (oldVal > newVal) {
      destroyChildDropdown($('.childDropdowns'), newVal);
    }

    total_value = total_value.substring(0, total_value.length - 2);
    $(".main").val(total_value);
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label>
Count all1 Traveller(s)
<input type="text" name="no_travellers" class="main" value="Adults: 1" placeholder="" />
</label>
<br/>
<label>
   <span>Children</span>
   <input type="text" class="travel" id="CAT_Custom_410672" name="CAT_Custom_410672"  value="0" />
   <ul class="button-group button-click">
      <li><a href="#" class="small button secondary"><i class="fa fa-plus"><span class="hide">+</span></i></a></li>
      <li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a></li>
   </ul>
</label>
<div class="childDropdowns"></div>