Question

您好，如何根据预定义的开始时间为li标签添加HH：MM时间？

背景：我有一个舞蹈调度程序，列出无序列表中的舞蹈条目。通过jQuery UI，用户可以重新安排舞蹈程序，完成后，他们可以显示当天舞蹈时间表中每个例程的时间。每个舞蹈例程的长度为3分钟，6分钟或30分钟，我将此长度存储在li标签的属性中（我知道不正确）。一天的开始是上午8:00:00，我想根据他们的长度，前面的舞蹈例程和一天的开始，为每个例程添加时间。

以下是我的循环中的PHP li代码示例，它打印出所有条目。我想将例程的时间存储在span id ='etimeXXX'中。例如，我的循环中的以下代码：

<ul id="sortable2">
...

$step2 .= "<li id='e".$e[entry_id]."' class='cat entry' lang='$length'>\n"
. "<span class='entry_time' id='etime".$e[entry_id]."'></span>"
. strtoupper($performance_title)]
. "</li>\n";

...
</ul>

...会输出类似的内容：

8:03:00 AM Twinkle Twinkle

8:06:00 AM Pie in the Sky

8:09:00 AM挑战

我正在尝试使用以下内容来显示时间，但它无法正常工作：

function createDanceTimes() {   
    var start_time = new Date("March 1, 2013 08:00:00");

    var h = start_time.getHours();
    var m = start_time.getMinutes();

    var entry_length = 0;
    var cur_time = m;

    $("#sortable2 li[id]").each(function(index) {           
        entry_length = $(this).children('span[id^="etime"]').attr('lang');

        m=m+entry_length;

        $(this).children('span[id^="etime"]').text(m);
    });
}

非常感谢任何帮助！

Answer 1

使用data-*属性（HTML5天赐善良），它可以更简单：

<ul id="sortable2">
//...
<?php
$performance_title = strtoupper($performance_title);
$step2 .= <<<HTML
  <li data-time='{$e['entry_id']}' data-length='{$length}' class='cat entry'>
    <span class='entry_time'></span>
    $performance_title
  </li>
HTML;
?>
//...
</ul>

function createDanceTimes() {   
  var start_time = new Date();

  start_time.setHour(8);
  start_time.setMinute(0);

  $("#sortable2 li[data-time]").each(function(index) {           
    var 
      $this = $this;

    start_time.setMinute(start_time.getMinute() + parseInt($this.data('length'), 10));

    $(this).find('span.entry_time').text((start_time.getHour()) + ':' + (start_time.getMinute())); // this will deal with minutes that get past 60, and will convert to a new hour automatically
  });
}

由于我不知道你现在使用的当前格式是什么，我只是在尝试我最好的猜测

通过jquery </li>将时间（HH：MM）添加到<li>标签

1 个答案: