Question

随着时间的推移，我在自己的项目中一直使用一些日历小部件，但最近我认为它们与我的期望不符。因此，我最近决定构建自己的“日历小部件”。

我有两个文件（为演示而简化）：

index.php

<div id="displayCalendar"></div>
<div id="displayStaff"></div>

<script>
  function selectDay(selected) {
    if(selected != $('#date').val()){
      var day = "#" + selected;
      $('.calendar-day-active').removeClass("calendar-day-active");
      $(day).addClass("calendar-day-active");

      $('#date').val(selected);

      getInfo();
    }
  }

  function displayCalendar(attrib = ""){
    $.ajax({
      type: 'POST',
      url: 'loadCalendar.php',
      data: { attrib: attrib },
      success: function(response) {
        $('#calendar_display').html(response);
      }
    });
  }
</script>

loadCalendar.php

<?php
  // this will be displayed for each day in the selected month
  echo '<div class="col border border-success calendar-day" id="calendar '.$day.$month.$year.'" onClick="selectDay(`'.$day.$month.$year.'`);">';
?>

现在的问题是，当我单击日历的某一天时，从旧元素中删除了类 calendar-day-active ，但是单击的类不会获得该类添加。

我还试图通过Chrome开发工具来选择和更改元素，但没有成功。

有没有办法修改使用php和ajax生成的html？（因为php文件是通过ajax加载的）

Answer 1

如果要在ID字段中保留空格，则应使用其他类型的选择器：

function selectDay(selected) {
 if(selected != $('#date').val()){
   var day = selected;
   $('.calendar-day-active').removeClass("calendar-day-active");
   $("div[id='calendar " + day + "']").addClass("calendar-day-active");

   $('#date').val(selected);

   getInfo();
 }
}

或者，您可以仅用下划线替换该空格，那么您就很好。

使用jQuery修改PHP生成的HTML

1 个答案: