jQuery在Do-While循环中无法按预期工作

Question

I have a webpage which lists hotel rooms and then optionally displays an availability calendar for each room. My problem is that the calendar doesn't always display.

The list of rooms is created with a PHP do-while loop. Each entry contains some information and a link to view the availability calendar.

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

Then the reveal of the calendar is triggered by this jquery to open up in a div of class hiddencal and with the same data-roomid as the link:

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

Let us say there are four rooms on the list. If I click the link on the first room, the calendar displays, but if I follow that by clicking the link on the second room the slideToggle works but there is no calendar.

Conversely, if I start with the second room and then go to the first room I can get both calendars to display, but not the third or fourth. So in effect I can go through the calendars from bottom to top, but no top to bottom.

I have tried echoing the variables in the availcalendar.php file to see if some data is being dropped but I can't trace the problem. Is there something I'm missing that is obvious to a more skilled eye than mine?

EDIT2 GaetanoM was right, but that was only one of two errors, so I struggled to work out what was going on. I have finished up with this code, very similar to GaetanoM's suggestion:

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

There was another problem in the availcalendar.php file, and once I corrected them both, all was well. Thanks to everyone for the suggestions.

Answer 1

Your issue is in this line:

$(".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.

Hence, in order to run the slideToggle you need to use the complete callback:

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