[英]How to limit the maximum of count
I wrote the below code for a booking flight and it works good. 我为预订航班编写了以下代码,效果很好。 my only problem is i can not set a limitation to my counter.
我唯一的问题是我不能对我的柜台设置限制。 how can i limit a maximum of 4 such “Child X” select fields?
如何最多限制4个此类“ Child X”选择字段? o want to set a limitation to add just to 4 .
o希望设置一个限制,使其仅增加到4。 how can i do this ?
我怎样才能做到这一点 ? here is my snippet :
这是我的片段:
$(function() { var createChildDropdown = function(i) { var $childDropdown = $('<div />', { 'class': 'childs' }); $childDropdown.append($('<label />', { 'for': 'childDropdown-' + i }).text('Child ' + i)); $childDropdown.append($('<select />', { 'id': 'childDropdown-' + i })); var options = ['a', 'b', 'c']; options.forEach(function(option, index) { $childDropdown.find('select').append($('<option />') .text(option).attr('value', index)); }); return $childDropdown; }; 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>
You could just add a if(newVal >= 5) return;
您可以只添加一个
if(newVal >= 5) return;
in your $(".button-click a")
click handler. 在
$(".button-click a")
单击处理程序中。 That would prevent further processing whenever the child count is going to be 5 or more. 每当子计数为5或更大时,这将阻止进一步的处理。
$(function() { var createChildDropdown = function(i) { var $childDropdown = $('<div />', { 'class': 'childs' }); $childDropdown.append($('<label />', { 'for': 'childDropdown-' + i }).text('Child ' + i)); $childDropdown.append($('<select />', { 'id': 'childDropdown-' + i })); var options = ['a', 'b', 'c']; options.forEach(function(option, index) { $childDropdown.find('select').append($('<option />') .text(option).attr('value', index)); }); return $childDropdown; }; 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 = ""; if(newVal >= 5) return; 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.