Question

我已经购买了一些主题。并且在该主题中，有一个“签入/签出”部分，用户可以在其中选择dateto的日期和来宾人数。

我遇到的问题是，我需要两个带有签入/签出部分，而另一个我无法获得弹出窗口，就像我进入第一个窗口一样。问题是该小节的唯一标识符。

这是图片：

这是HTML标记：

<div class="container platinumcalendar">
    <div class="sc-hb-rooms-search style-01">
        <div class="hotel-booking-search style-01">
            <ul class="hb-form-table">
                <li><input type="text" id="inputPlatinumDate" class="multidate" value="" placeholder="Check-In" />
                </li>

                <li class="hb-form-field hb-form-check-in">
                    <div class="label">Check-In</div>
                    <div class="hb-form-field-input hb_input_field">
                        <input type="text" id="checkinday_platinum" class="day" value="" style="width: 68px;" />
                        <input id="checkinmonth_platinum" class="month" type="text" value="" />
                        <input type="hidden" name="check_in_date_platinum" id="check_in_date1"
                            class="check-date hasDatepicker" value="" />
                    </div>
                </li>

                <li class="hb-form-field hb-form-check-out">
                    <div class="label">Check-Out</div>
                    <div class="hb-form-field-input hb_input_field">
                        <input type="text" id="checkoutday_platinum" class="day" value="" style="width: 83px;" />
                        <input id="checkoutmonth_platinum" class="month" type="text" value="" />
                        <input type="hidden" name="check_out_date_platinum" id="check_out_date_platinum"
                            class="check-date hasDatepicker" value="" />
                    </div>
                </li>
                <li class="hb-form-field hb-form-number">
                    <div class="label">Number</div>
                    <div id="guests" class="hb-form-field-input hb_input_field">
                        <input type="text" id="number2" class="day" value="01" />
                        <input class="month" type="text" value="Guests" />
                    </div>
                    <div class="hb-form-field-list">
                        <div class="hb-form-field-input hb-guest-field">
                            <select name="adults_capacity" tabindex="-1" aria-hidden="true">
                                <option value="1">1</option>
                                <option value="2">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>
                            </select>
                            <span class="name">Guests</span>
                            <span class="number-icons goUp"><i class="ion-plus"></i></span>
                            <span class="number-icons goDown"><i class="ion-minus"></i></span>
                        </div>
                    </div>
                </li>
            </ul>
            <p class="hb-submit">
                <span class="contact-info">Need Help: <span>(+381) xxxxxx</span></span>
                <button class="platinum_inquiry" type="submit" data-toggle="modal" data-target="#exampleModal">Send
                    Inquiry</button>
            </p>
        </div>
    </div>
</div>

<div class="empty-space"></div>
<div class="empty-space"></div>
<div class="empty-space"></div>
<div class="container goldcalendar">
    <div class="sc-hb-rooms-search style-01">
        <div class="hotel-booking-search style-01">

            <ul class="hb-form-table">
                <li><input type="text" id="inputGoldDate" class="multidate" value="" placeholder="Check-In" /></li>

                <li class="hb-form-field hb-form-check-in">
                    <div class="label">Check-In</div>
                    <div class="hb-form-field-input hb_input_field">
                        <input type="text" id="checkinday_gold" class="day" value="" style="width: 68px;" />
                        <input id="checkinmonth_gold" class="month" type="text" value="" />
                        <input type="hidden" name="check_in_date_gold" id="check_in_date_gold"
                            class="check-date hasDatepicker" value="" />
                    </div>
                </li>

                <li class="hb-form-field hb-form-check-out">
                    <div class="label">Check-Out</div>
                    <div class="hb-form-field-input hb_input_field">
                        <input type="text" id="checkoutday_gold" class="day" value="" style="width: 83px;" />
                        <input id="checkoutmonth_gold" class="month" type="text" value="" />
                        <input type="hidden" name="check_out_date" id="check_out_date_gold"
                            class="check-date hasDatepicker" value="" />
                    </div>
                </li>
                <li class="hb-form-field hb-form-number">
                    <div class="label">Number</div>
                    <div id="guests" class="hb-form-field-input hb_input_field">
                        <input type="text" id="number" class="day" value="01" />
                        <input class="month" type="text" value="Guests" />
                    </div>
                </li>
            </ul>
            <p class="hb-submit">
                <span class="contact-info">Need Help: <span>(+381)xxxxxxxx</span></span>
                <button class="gold_inquiry" type="submit" data-toggle="modal" data-target="#exampleModal">Send
                    Inquiry</button>
            </p>
        </div>
    </div>

现在我还不太了解的有趣部分：theme.js文件中的这一部分：

$('#guests').each(function () {
    //debugger;
    var $form_list = $('.sc-hb-rooms-search.style-01 .hb-form-field-list');
    $('#guests').on('click touch', function () {
        $form_list.toggleClass('active');
    });
    $(document).on('click touch', function (event) {
        if (!$(event.target).parents().addBack().is('#guests')) {
            $form_list.removeClass('active');
        }
    });
    $form_list.on('click touch', function (event) {
        event.stopPropagation();
    });
});

$('.goUp').on('click', function () {
    var index = $('select[name="adults_capacity"] option:selected').index();
    var count = $(' select[name="adults_capacity"] option').length;

    if (index + 1 >= count) {
        return;
    }

    var selected = $($('select[name="adults_capacity"] option')[index + 1]).val();

    $('select[name="adults_capacity"]').val(selected);

});
$('.goDown').on('click', function () {
    var index = $('select[name="adults_capacity"] option:selected').index();
    if (index <= 0) {
        return;
    }
    var selected = $($('select[name="adults_capacity"] option')[index - 1]).val();
    $('select[name="adults_capacity"]').val(selected);
});

function changeNumber() {
    var $max_child = $(' select[name="max_child"] option:selected').html();
    var $adults_capacity = $('select[name="adults_capacity"] option:selected').html();
    var $number_total = Math.round($adults_capacity);
    if ($number_total < 10) {
        $('#number').val('0' + $number_total);
    } else {
        $('#number').val($number_total);
    }
}

$('.sc-hb-rooms-search.style-01 .goUp').on('click', function () {
    changeNumber();
});
$('.sc-hb-rooms-search.style-01 .goDown').on('click', function () {
    changeNumber();
});

此JS脚本称为页面的onLoad，因此我不知道如何放置一些第二个唯一ID并正确调用。

我曾经尝试过像$('#guests, #guests1').each(function () {...}那样，但这并没有成功。

我认为键是var $form_list = $('.sc-hb-rooms-search.style-01 .hb-form-field-list');，但对我而言这没有意义，因为它是类选择器，它应该与两个部分都相关吗？

我不会打扰您CSS文件，因为我认为在这种情况下它们无关紧要。

尝试＃1 ：我试图像这样在我的js中添加重复的代码：

$('#guests').each(function () {
            //debugger;
            var $form_list = $('.sc-hb-rooms-search.style-01 .hb-form-field-list');
            $('#guests').on('click touch', function () {
                $form_list.toggleClass('active');
            });
            $(document).on('click touch', function (event) {
                if (!$(event.target).parents().addBack().is('#guests')) {
                    $form_list.removeClass('active');
                }
            });
            $form_list.on('click touch', function (event) {
                event.stopPropagation();
            });
        });

        $('#guests1').each(function () {
            //debugger;
            var $form_list1 = $('.sc-hb-rooms-search.style-01 .hb-form-field-list');
            $('#guests1').on('click touch', function () {
                $form_list1.toggleClass('active');
            });
            $(document).on('click touch', function (event) {
                if (!$(event.target).parents().addBack().is('#guests1')) {
                    $form_list1.removeClass('active');
                }
            });
            $form_list1.on('click touch', function (event) {
                event.stopPropagation();
            });
        });

我分别编辑了第二部分，以将id=guests输入到id=guests1

结果：现在第一个或第二个弹出窗口将不起作用。链接到仓库：repo

Answer 1

我认为为什么行不通的答案就在这行：

$('#guests').on('click touch', function () {
   $form_list.toggleClass('active');
});

在这里，如果您单击#guests，则会切换form_list。但是，您不能仅在此处添加#guests2，因为那样您每次点击都会同时切换两个div。当前，此函数的编写方式只能在页面中包含一次，如果需要多次，则需要重写它。

这是一个关于如何入门的想法，尝试用此代码块替换所有$('#guests').each()函数：

 <div class="hb-form-field-input hb_input_field MY_TOGGLE_CLASS">
       <input type="text" id="number2" class="day" value="01" />
        <input class="month" type="text" value="Guests" />
 </div>
 <div class="hb-form-field-list MY_SECOND_CUSTOM_CLASS"> ... </div>    


//Multidate
$('.MY_TOGGLE_CLASS').on("click", function() {
    $(this).next().toggleClass('active');
});

$('.MY_SECOND_CUSTOM_CLASS').on('click touch', function(event) {
    event.stopPropagation();
});

$(document).on('click touch', function (event) {
  if (!$(event.target).closest('.MY_TOGGLE_CLASS').length) {
     $('.MY_SECOND_CUSTOM_CLASS').removeClass('active');
  }

}）;

第二个div对象不会打开弹出窗口

1 个答案: