Jquery 在 Do-While 循环中未按预期工作

Question

我有一个列出酒店房间的网页，然后可以选择显示每个房间的可用性日历。我的问题是日历并不总是显示。

房间列表是使用 PHP do-while 循环创建的。每个条目都包含一些信息和一个 link 以查看可用性日历。

<a href="javascript:;" data-roomid="<?php echo $room_id ?>" class="click">See Calendar</a>

然后这个 jquery 触发日历的显示，在 class hiddencal 的 div 中打开，并且具有与 [=36= 相同的数据房间 ID ]:

$(document).ready(function() {
    $("a.click").on('click', function() {
        var s = $(this);
        var roomid = $(this).attr("data-roomid");
        $(".hiddencal[data-roomid='" + roomid + "']").load("availcalendar.php?hid=<?php echo $hid;?>&room_id=" + roomid + "&month=<?php echo $ArrMonth;?>&year=<?php echo $ArrYear;?>")
        .slideToggle(1000, function() {
            s.html(s.text() == 'See Calendar' ? 'Hide Calendar' : 'See Calendar');
        });
    });
});

假设列表中有四个房间。如果我单击第一个房间的 link，日历会显示，但如果我通过单击第二个房间的 link 进行操作，slideToggle 可以工作，但没有日历。

相反，如果我从第二个房间开始，然后转到第一个房间，我可以显示两个日历，但不能显示第三个或第四个。所以实际上我可以从下到上浏览日历，但不能从上到下。

我尝试回显 availcalendar.php 文件中的变量以查看是否删除了某些数据，但我无法追踪到问题所在。有什么我遗漏的东西比我更熟练的眼睛是显而易见的吗？

编辑2 GaetanoM 是对的，但这只是两个错误之一，所以我很难弄清楚到底发生了什么。我已经完成了这段代码，与 GaetanoM 的建议非常相似：

$(document).ready(function() {
$("a.click").on('click', function() {
    var s = $(this);
    var roomid = $(this).attr("data-roomid");
$(".hiddencal[data-roomid='" + roomid + "']").load("availcalendar.php?hid=<?php echo $hid?>&room_id=" + roomid + "&month=06&year=2019").slideToggle(1200, function() {
        s.html(s.text() == 'See Calendar' ? 'Hide Calendar' : 'See Calendar');
    });
});
});

availcalendar.php 文件中还有另一个问题，我更正了这两个问题后，一切正常。感谢大家的建议。

Answer 1

您的问题在这一行：

$(".hiddencal[data-roomid='" + roomid + "']").load("availcalendar.php?hid=<?php echo $hid;?>&room_id=" + roomid + "&month=<?php echo $ArrMonth;?>&year=<?php echo $ArrYear;?>")

.load( url [, data ] [, complete ] ): Load data from the server and place the returned HTML into the matched elements.

complete: A callback function that is executed when the request completes.

因此，为了运行 slideToggle，您需要使用 complete 回调：

$(".hiddencal[data-roomid='" + roomid + "']").load("YOUR URL", function() {
    s.slideToggle(1000, function() {
        s.html(s.text() == 'See Calendar' ? 'Hide Calendar' : 'See Calendar');
    });
});

Jquery 在 Do-While 循环中未按预期工作

Jquery Not Working as Expected in a Do-While Loop

php

jquery

jquery-ui