3

我在女巫中有一个代码，我只想在当前索引大于 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();
        }
    });

});
4

4 回答 4

3

两个字符串比较的结果不是您需要的：字符串比较将逐个比较两个字符串的每个字符，最后确定比较结果。

例子 ：

如果比较'Room10'和' Room8' ，那么当它比较两个字符串时，它会比较两个'R'，两个'o'，然后再比较'o'，然后两个'm'，然后它会比较' 1'和'8'。

在那一刻，'1'将比'8'更接近字母表的开头，然后您的测试将返回 false，无论后面的字符是什么。

有关更多详细信息，请参阅本文。

改用int currentIndex：

if(currentIndex > 8)
{
   alert("you can't Add more than 8 rooms");
}
于 2013-04-24T07:20:27.527 回答
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;
            }

小提琴

于 2013-04-24T07:16:06.417 回答
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
于 2013-04-24T07:22:04.983 回答
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();
        }
    });

});

菲德尔是 ::菲德尔

并在html中添加以下代码形式::

<input type="hidden"  id="hdf"  />

或者，如果您不想添加隐藏字段，请使用以下代码：

if(currentIndex>=8)
        {
        alert("you can't Add more than 8 rooms");
            return false;
        }

这是它的菲德尔::菲德尔

于 2013-04-24T07:27:12.630 回答