如何將顯示塊設置爲基於計數的對象

Question

我有一個預訂飛行形式，需要兒童旅客的數量。

有3 select來定義每個旅行的年齡，但我設置display:none給他們。

我寫了下面的代碼，但我不知道如何根據每次爲每次旅行添加號碼顯示每個select。

例如，當用戶添加1個旅行時，我想顯示第一個select。 2顯示第二個select。

我想顯示每個select基於值的增加和減少與類名travel。

我該怎麼做？

這裏是我的代碼片段：

$(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 VS的oldVal知道，如果孩子的數量已經增加與否，並調用正確的函數。假設我們創建一個名爲<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>