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

Question

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

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

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

然后日历的显示由这个 jquery 触发，以在 hiddencal 类的 div 中打开，并且与链接具有相同的 data-roomid：

$(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');
        });
    });
});

假设列表中有四个房间。如果我单击第一个房间上的链接，则会显示日历，但如果我单击第二个房间上的链接，则 slideToggle 可以工作，但没有日历。

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

我尝试在availcalendar.php 文件中回显变量以查看是否有一些数据被丢弃，但我无法追踪问题。有没有比我更熟练的眼睛更明显的我遗漏的东西？

EDIT2 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 ] )：从服务器加载数据，并将返回的 HTML 放入匹配的元素中。

complete：请求完成时执行的回调函数。

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

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