我在女巫中有一个代码，我只想在当前索引大于 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();
}
});
});
最佳答案
两个字符串比较的结果不是你需要的:字符串比较是将两个字符串的每个字符一个一个地比较，最后确定你的比较结果。
示例:
如果比较'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");
}
关于javascript - 单击添加按钮我只需要八个房间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16185669/