无法让Jquery代码在click上工作

Question

我有一个日历，可以在线从API中提取日期和时间。当它拉动时间时，它会在<ul>和<li>设置中显示它们，如下所示：

以下是用于解析时间并创建列表项的PHP代码：

foreach($decoded as $times){    
    $dateTime = DateTime::createFromFormat('Y-m-d\TH:i:sO', $times->time);
    $time = $dateTime->format('h:i A');

     $eventListHTML .= '<li id='.$times->time.' class="available_times">'.$time.'</li><br>';
}

我也有Jquery应该，当单击List Items的一个时间时，向上滑动包含日历的div，然后通过向下滑动显示下一个div。这是代码：

   $(".acuity_times").click(function(){

    $("#calendar_div").slideUp(1000,function(){
       $("#marketing_div").slideDown(1000);
    });
});

以下是Jquery中引用的两个div：

<div id="calendar_div">
<script>
$("#calendar_div").hide(0);
</script>
    <?php echo getCalender(); ?>
</div>
<div id="marketing_div">
<script>
$("#marketing_div").hide(0);
</script>
    <?php echo chooseMarketing(); ?>
</div>

我最终想要做的是，当我点击日历上的可用时间时，将需要花费在PHP中的ID中设置的时间并将其保存以便稍后安排约会，但我还没有尚未实现该部分，我只是想让滑动动作起作用。目前，当我单击列表项时，它不会执行任何操作。

Answer 1

更新您的PHP并添加一个花费时间的值属性：

foreach($decoded as $times){    
    $dateTime = DateTime::createFromFormat('Y-m-d\TH:i:sO', $times->time);
    $time = $dateTime->format('h:i A');

    $eventListHTML .= '<li id='.$times->time.' value='.$times->time.'  class="available_times">'.$time.'</li><br>';
}

更新您的jQuery代码以绑定li元素上的click事件：

$(".available_times").on('click', function() {
    var time = $(this).val();
    $("#calendar_div").slideUp(1000, function() {
        $("#marketing_div").slideDown(1000);
    });
});