javascript - jQuery 适用于第一个 forloop，不适用于 Django 中的其他 forloop 元素

Question

我正在使用W3widgets calendar我想通过 Python/Django 动态设置日期。在 JavaScript hook 中输入 value 标签后，它只选择了一个日期，并且有多个日期条目。如何让它选择所有日期条目并显示在日历上？

下面是 html/JavaScript 代码和源代码。

HTML:

 <!-- Responsive calendar - START -->
    <div class="responsive-calendar">
    <div class="controls">
        <a class="pull-left" data-go="prev"><div class="btn btn-primary">Prev</div></a>
        <h4><span data-head-year></span> <span data-head-month></span></h4>
        <a class="pull-right" data-go="next"><div class="btn btn-primary">Next</div></a>
    </div><hr/>
    <div class="day-headers">
      <div class="day header">Mon</div>
      <div class="day header">Tue</div>
      <div class="day header">Wed</div>
      <div class="day header">Thu</div>
      <div class="day header">Fri</div>
      <div class="day header">Sat</div>
      <div class="day header">Sun</div>
    </div>
    <div class="days" data-group="days">

    </div>
  </div>
  <!-- Responsive calendar - END -->
</div>

<!--where Django for loop starts -->
 {% for bring_out_date in bring_out_dates %}

<script type="text/javascript">
  $(document).ready(function () {
    $(".responsive-calendar").responsiveCalendar({
      time: '2014-05',
      events: {
      //here's the tag I'm talking about
        "{{ bring_out_date.booked_dates|date:"Y-m-d"}}": {"number":  {{bring_out_date.id}}}}
      });
    });
 </script>

{% empty %}

    <p> no date selected. update your calendar </p>

    {% endfor %}

它在源代码中的样子:

<script type="text/javascript">
  $(document).ready(function () {
    $(".responsive-calendar").responsiveCalendar({
      time: '2014-05',
      events: {
        "2014-03-11": {"number":12}}
    });
  });
 </script>

<script type="text/javascript">
  $(document).ready(function () {
    $(".responsive-calendar").responsiveCalendar({
      time: '2014-05',
      events: {
        "2014-03-12": {"number":13}}
    });
  });
</script>


<script type="text/javascript">
  $(document).ready(function () {
    $(".responsive-calendar").responsiveCalendar({
      time: '2014-05',
      events: {
        "2013-01-09": {"number":31}}
    });
  });
</script>

<script type="text/javascript">
   $(document).ready(function () {
    $(".responsive-calendar").responsiveCalendar({
      time: '2014-05',
      events: {
        "2014-04-03": {"number":15}}
     });
   });
  </script>


 <script type="text/javascript">
   $(document).ready(function () {
     $(".responsive-calendar").responsiveCalendar({
      time: '2014-05',
      events: {
        "2014-04-09": {"number":19}}
     });
   });
 </script>

如何让它选择所有日期条目并将其显示在日历上？这可能是 jQuery 没有选择所有其他 forloop 吗？

Answer 1

我通过将 for 循环放入事件中来使其工作:feeder -

events: {
{% for vDate, vClass, vBadges in cal_list %}
"{{vDate}}": {"class":"{{vClass}}", {% if vBadges != 0 %}"number": "{{vBadges}}",         
"badgeClass": "badge-primary"{% endif %}},{% endfor %}