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

Question

我已经购买了一些主题。在该主题中，有一个 checkin / checkout 部分，用户可以在其中选择日期和客人数量。

我遇到的问题是我需要两个带有 checkin / checkout 的部分，而在另一个部分我无法获得弹出窗口，因为我正在进入第一个部分。问题是子部分的唯一标识符。

这是图片:

这是一个 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 链接:repo

Answer 1

我认为为什么它不起作用的答案在于这一行:

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

如果您点击#guests，这里的 form_list 会被切换。但是您不能只在此处添加 #guests2，因为那样您会在每次点击时切换两个 div。目前这个函数的写法是页面中只能包含一次，如果需要多次需要重写。

这是一个关于如何让你开始的想法，尝试用这个 block 替换你所有的 $('#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');
  }

});