我有一个巫婆的代码我只想在当前索引大于8时添加8个房间给出警告，即你不能添加超过8个房间。问题是，当我点击索引8时，它显示警告但在此之后我点击添加房间它附加房间10请帮助 这是我在js fiddle http://jsfiddle.net/FhyLX/
上的代码<body>
<form id="form1" runat="server">
<div id="guestsRooms" class="clear">
<label class="label1" for="guestsRoomsSelect">How many people</label>
<span>
<span>
<select id="guestsRoomsSelect" name="GuestsRooms" >
<option selected="selected" value="RB=1&RA1=1&RCA1=0">1 adult</option>
<option value="RB=1&RA1=2&RCA1=0">2 adults in 1 room</option>
<option value="RB=1&RA1=3&RCA1=0">3 adults in 1 room</option>
<option value="RB=1&RA1=4&RCA1=0">4 adults in 1 room</option>
<option value="RB=2&RA1=2&RCA1=0&RA2=2&RCA1=0">2 adults in 2 rooms</option>
<option value="0">Need more rooms or have children?</option>
</select>
</span>
</span>
</div>
<div id="roomconfig" class="roomconfig_fc">
<div id="Addition"></div>
<div class="btnWrap">
<a class="addRoom" style="background-image:none; color:darkred;height:20px; margin-left:20px" href="javascript:void(0);"><img alt="" src="Images/SearchBox/image1.png" class="addimage" />Add room</a>
</div>
</div>
<a id="btnSubmit" class="a" href="javascript:void(0);">Find a hotel</a>
</form>
</body>
$(document).ready(function () {
var counter = 1;
var IsRoomPreSelected = false;
var currentIndex = 1;
var RoomsString = "";
$('#roomconfig').hide();
$("#guestsRoomsSelect").find("option[value='2-1']").attr("selected", "selected");
$('#adults').prop("selectedIndex", 1);
$('#hc_f_children').prop("selectedIndex", 0);
$('#guestsRoomsSelect').change(function () {
if ($(this).val() === '0' && IsRoomPreSelected === false) {
var $var2 = '<div id="AdultWrapper_' + counter + '" class="class1"> <div class="wrapadults" style="float:left"> <label class="lbl_sm" style="font-size: 0.75em" for="adults">Adults</label>'
$var2 = $var2 + '<span><select id="AdultDropdown_' + counter + '" class="t_adults" style="margin-left:0px;margin-right:12px; border-right: 0.5px solid #FFFFFF;"><option value="1">1</option><option value="2" selected="selected">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option></select></span></div></div>'
$var2 = $var2 + '<div id="ChildrenWrapper_' + counter + '" class="child" ><label class="lbl_sm" style="font-size: .75em; padding-left:3px; padding-right:2px;border-right:1px solid #fff;" for="children">Children</label><br/><span style="float: left;width: auto;padding-right:6px;border-right: 1px solid #fff;padding-bottom: 5px;margin: 0PX;"><select id="ChildrenDropdown_' + counter + '" class="tfo_evt_children " style="border-right: 0.5px solid #FFFFFF;margin-right:7px; width:40px;"><option value="0" selected="selected">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option><option value="4">4</option> </select> </span><div id="ChildrenAgeWrapper_' + counter + '" class="ch"></div>';
$("#Addition").prepend('<fieldset id="Roomesfieldset_' + counter + '" data-index="' + counter + '"><legend id="RoomLegend" >Room ' + currentIndex + ':</legend>' + $var2 + '</fieldset>');
counter = counter + 1;
IsRoomPreSelected = true;
$('#roomconfig').show(300);
}
else if ($(this).val() === '0' && IsRoomPreSelected === true) {
$('#roomconfig').show(300);
}
else {
$('#roomconfig').hide(300);
}
});
$(".addRoom").click(function () {
currentIndex++;
if('Room'+currentIndex+''>'Room8')
{
alert("you can't Add more than 8 rooms");
}
else
{
var $var1 = '<div id="AdultWrapper_' + counter + '" class="class1"> <div class="wrapadults" style="float:left"><span><select id="AdultDropdown_' + counter + '" class="t_adults" style="margin-left:0px;margin-right:12px; border-right: 0.5px solid #FFFFFF;"><option value="1">1</option><option value="2" selected="selected">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option></select></span></div></div>'
$var1 = $var1 + '<div id="ChildrenWrapper_' + counter + '" id="child" > <span style="float: left;width: auto;padding-right:6px;border-right: 1px solid #fff;padding-bottom: 5px;margin: 0PX;"><select id="ChildrenDropdown_' + counter + '" class="tfo_evt_children " style="border-right: 0.5px solid #FFFFFF; margin-right:7px; width:40px;"><option value="0" selected="selected">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option><option value="4">4</option> </select> </span><div id="ChildrenAgeWrapper_' + counter + '" class="ch"></div></div>'
$var1 = $var1 + '<div class="btnrmv" id="' + counter + '"> <a id="RemoveRoomAnchor" href="javascript:void(0);" class="removeRoom" style="height:0px; margin:0px;float:right;position:relative;background-image:none; color:#b11500;font-weight:normal;font-size:0.77em;" href="javascript:void(0);"><img src="Images/SearchBox/close.png" alt="Remove" /></a></div>';
$("#Addition").append('<fieldset id="Roomesfieldset_' + counter + '" data-index="' + counter + '"><legend id="RoomLegend">Room ' + currentIndex + ':</legend>' + $var1 + '</fieldset>');
counter = counter + 1;
}
});
$("#Addition").on('click', '#RemoveRoomAnchor', function (e) {
$(this).closest("[id^=Roomesfieldset]").remove();
$("fieldset").each(function (index) {
$(this).attr("data-index", index);
var te = $(this).attr("data-index");
$(this).children("legend").text('Rooms ' + (++index) + ' :');
currentIndex = index;
});
});
$("#Addition").on('change', '[id^=ChildrenDropdown]', function (e) {
$parentElement = $(this).closest("[id^=ChildrenWrapper]").children("[id^=ChildrenAgeWrapper]");
var previousChildrenCount = $("#" + $parentElement.attr("id") + " input").size();
var currentChildrenCount = $(this[this.selectedIndex]).val();
if (currentChildrenCount > previousChildrenCount)
{
for (i = previousChildrenCount; i < currentChildrenCount; i++)
{
var $ctrl = $('<input/>').attr({ type: 'text', class: 'age', name: 'text', value: '', style: 'width:30px;' });
$parentElement.append($ctrl);
}
}
else if (currentChildrenCount < previousChildrenCount)
{
$("#" + $parentElement.attr("id") + " input:gt(" + (currentChildrenCount-1) + ")").remove();
}
if (currentChildrenCount === '0')
{
$("#" + $parentElement.attr("id") + " input").remove();
}
});
$("#btnSubmit").click(function (e)
{
// alert($("#guestsRoomsSelect").val());
if (($("#guestsRoomsSelect").val()) == 0)
{
RoomsString = "";
var Rooms = 0;
$("[id^=Roomesfieldset]").each(function (index) {
// Rooms = Rooms + parseInt($(this).attr("data-index"));
Rooms = Rooms + 1;
var adult = $(this).find("[id^=AdultDropdown]").val();
var child = $(this).find("[id^=ChildrenDropdown]").val();
// RoomsString = RoomsString + "&RA" + $(this).attr("data-index") + "=" + adult;
RoomsString = RoomsString + "&RA" + (index + 1) + "=" + adult;
if (child > 0)
{
var ageArray = new Array(child);
$(this).find("[id^=ChildrenAgeWrapper]").children().each(function (index) {
var childAge = $(this).val();
ageArray[index] = childAge;
});
// RoomsString = RoomsString + "&RCA" + $(this).attr("data-index") + "=" + ageArray.toString();
RoomsString = RoomsString + "&RCA" + (index + 1) + "=" + ageArray.toString();
}
else
{
// RoomsString = RoomsString + "&RCA" + $(this).attr("data-index") + "=" + 0;
RoomsString = RoomsString + "&RCA" + (index + 1) + "=" + 0;
}
});
RoomsString = "&RC=" + Rooms + RoomsString;
}
else
{
RoomsString = $("#guestsRoomsSelect").val();
}
});
});
答案 0 :(得分：3)
两个字符串比较的结果不是你需要的：字符串比较将逐个比较两个字符串的每个字符，最后确定比较的结果。
如果比较'Room10'和'Room8'，那么当它比较两个字符串时，它将比较'R'，'o'，然后再次'o'，然后'm'，然后它将比较'1'' 和'8'。
此时，'1'将比'8'更接近字母表的开头，然后您的测试将返回false，无论以下字符如何是
有关详细信息，请参阅this article。
使用int currentIndex代替：
if(currentIndex > 8)
{
alert("you can't Add more than 8 rooms");
}
答案 1 :(得分：2)
警告之后，您必须返回false，以便代码知道何时停止继续进行。
alert("you can't Add more than 8 rooms");
return false;
喜欢这个
if(currentIndex>7)
{
alert("you can't Add more than 8 rooms");
return false;
}
答案 2 :(得分：0)
首先测试房间指数是否大于8然后增加房间指数：
$(".addRoom").click(function () {
if(currentIndex>8){ //test if greater than 8
alert("you can't Add more than 8 rooms");
return false;
} else {
currentIndex++
... //add the rest of the code here
答案 3 :(得分：0)
在jquery中尝试以下代码：
$(document).ready(function () {
var counter = 1;
var IsRoomPreSelected = false;
var currentIndex = 1;
var RoomsString = "";
$('#roomconfig').hide();
$("#guestsRoomsSelect").find("option[value='2-1']").attr("selected", "selected");
$('#adults').prop("selectedIndex", 1);
$('#hc_f_children').prop("selectedIndex", 0);
$('#guestsRoomsSelect').change(function () {
if ($(this).val() === '0' && IsRoomPreSelected === false) {
var $var2 = '<div id="AdultWrapper_' + counter + '" class="class1"> <div class="wrapadults" style="float:left"> <label class="lbl_sm" style="font-size: 0.75em" for="adults">Adults</label>'
$var2 = $var2 + '<span><select id="AdultDropdown_' + counter + '" class="t_adults" style="margin-left:0px;margin-right:12px; border-right: 0.5px solid #FFFFFF;"><option value="1">1</option><option value="2" selected="selected">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option></select></span></div></div>'
$var2 = $var2 + '<div id="ChildrenWrapper_' + counter + '" class="child" ><label class="lbl_sm" style="font-size: .75em; padding-left:3px; padding-right:2px;border-right:1px solid #fff;" for="children">Children</label><br/><span style="float: left;width: auto;padding-right:6px;border-right: 1px solid #fff;padding-bottom: 5px;margin: 0PX;"><select id="ChildrenDropdown_' + counter + '" class="tfo_evt_children " style="border-right: 0.5px solid #FFFFFF;margin-right:7px; width:40px;"><option value="0" selected="selected">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option><option value="4">4</option> </select> </span><div id="ChildrenAgeWrapper_' + counter + '" class="ch"></div>';
$("#Addition").prepend('<fieldset id="Roomesfieldset_' + counter + '" data-index="' + counter + '"><legend id="RoomLegend" >Room ' + currentIndex + ':</legend>' + $var2 + '</fieldset>');
counter = counter + 1;
IsRoomPreSelected = true;
$('#roomconfig').show(300);
}
else if ($(this).val() === '0' && IsRoomPreSelected === true) {
$('#roomconfig').show(300);
}
else {
$('#roomconfig').hide(300);
}
});
$(".addRoom").click(function () {
currentIndex++;
$('[id$=hdf]').val(currentIndex);
alert(currentIndex);
alert($('[id$=hdf]').val());
if($('[id$=hdf]').val()>='8')
{
alert("you can't Add more than 8 rooms");
}
else
{
var $var1 = '<div id="AdultWrapper_' + counter + '" class="class1"> <div class="wrapadults" style="float:left"><span><select id="AdultDropdown_' + counter + '" class="t_adults" style="margin-left:0px;margin-right:12px; border-right: 0.5px solid #FFFFFF;"><option value="1">1</option><option value="2" selected="selected">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option></select></span></div></div>'
$var1 = $var1 + '<div id="ChildrenWrapper_' + counter + '" id="child" > <span style="float: left;width: auto;padding-right:6px;border-right: 1px solid #fff;padding-bottom: 5px;margin: 0PX;"><select id="ChildrenDropdown_' + counter + '" class="tfo_evt_children " style="border-right: 0.5px solid #FFFFFF; margin-right:7px; width:40px;"><option value="0" selected="selected">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option><option value="4">4</option> </select> </span><div id="ChildrenAgeWrapper_' + counter + '" class="ch"></div></div>'
$var1 = $var1 + '<div class="btnrmv" id="' + counter + '"> <a id="RemoveRoomAnchor" href="javascript:void(0);" class="removeRoom" style="height:0px; margin:0px;float:right;position:relative;background-image:none; color:#b11500;font-weight:normal;font-size:0.77em;" href="javascript:void(0);"><img src="Images/SearchBox/close.png" alt="Remove" /></a></div>';
$("#Addition").append('<fieldset id="Roomesfieldset_' + counter + '" data-index="' + counter + '"><legend id="RoomLegend">Room ' + currentIndex + ':</legend>' + $var1 + '</fieldset>');
counter = counter + 1;
}
});
$("#Addition").on('click', '#RemoveRoomAnchor', function (e) {
$(this).closest("[id^=Roomesfieldset]").remove();
$("fieldset").each(function (index) {
$(this).attr("data-index", index);
var te = $(this).attr("data-index");
$(this).children("legend").text('Rooms ' + (++index) + ' :');
currentIndex = index;
});
});
$("#Addition").on('change', '[id^=ChildrenDropdown]', function (e) {
$parentElement = $(this).closest("[id^=ChildrenWrapper]").children("[id^=ChildrenAgeWrapper]");
var previousChildrenCount = $("#" + $parentElement.attr("id") + " input").size();
var currentChildrenCount = $(this[this.selectedIndex]).val();
if (currentChildrenCount > previousChildrenCount)
{
for (i = previousChildrenCount; i < currentChildrenCount; i++)
{
var $ctrl = $('<input/>').attr({ type: 'text', class: 'age', name: 'text', value: '', style: 'width:30px;' });
$parentElement.append($ctrl);
}
}
else if (currentChildrenCount < previousChildrenCount)
{
$("#" + $parentElement.attr("id") + " input:gt(" + (currentChildrenCount-1) + ")").remove();
}
if (currentChildrenCount === '0')
{
$("#" + $parentElement.attr("id") + " input").remove();
}
});
$("#btnSubmit").click(function (e)
{
// alert($("#guestsRoomsSelect").val());
if (($("#guestsRoomsSelect").val()) == 0)
{
RoomsString = "";
var Rooms = 0;
$("[id^=Roomesfieldset]").each(function (index) {
// Rooms = Rooms + parseInt($(this).attr("data-index"));
Rooms = Rooms + 1;
var adult = $(this).find("[id^=AdultDropdown]").val();
var child = $(this).find("[id^=ChildrenDropdown]").val();
// RoomsString = RoomsString + "&RA" + $(this).attr("data-index") + "=" + adult;
RoomsString = RoomsString + "&RA" + (index + 1) + "=" + adult;
if (child > 0)
{
var ageArray = new Array(child);
$(this).find("[id^=ChildrenAgeWrapper]").children().each(function (index) {
var childAge = $(this).val();
ageArray[index] = childAge;
});
// RoomsString = RoomsString + "&RCA" + $(this).attr("data-index") + "=" + ageArray.toString();
RoomsString = RoomsString + "&RCA" + (index + 1) + "=" + ageArray.toString();
}
else
{
// RoomsString = RoomsString + "&RCA" + $(this).attr("data-index") + "=" + 0;
RoomsString = RoomsString + "&RCA" + (index + 1) + "=" + 0;
}
});
RoomsString = "&RC=" + Rooms + RoomsString;
}
else
{
RoomsString = $("#guestsRoomsSelect").val();
}
});
});
Fiddel是:: Fiddel
并在html中添加以下代码::
<input type="hidden" id="hdf" />
或者，如果您不想添加隐藏字段，请转到以下代码：
if(currentIndex>=8)
{
alert("you can't Add more than 8 rooms");
return false;
}
这是fiddel for it :: Fiddel