需要为 PHP 文件中的 div 分配唯一 ID

Question

我正在输出一个日历，最终将显示为最终用户的一系列按钮。每个按钮都有事件的名称。当您点击一个按钮时，它会向下切换以显示简短描述和事件的日期/时间。

到目前为止，我已经展示了所有的事件按钮。但是，当您单击任何按钮时，只会显示最顶部事件的描述和日期/时间。我需要帮助的是弄清楚如何为每个事件实例分配一个唯一的 div ID。我在这里尝试了一些其他示例，但是因为以下代码是用 PHP 编写的，所以只创建了一个 var = blank;引发处理错误。

  public function event_block($title, $desc, $start, $end, $where = NULL, $img = NULL, $span = 6)
{
$start_arr = date_parse($start);
$start_stamp = mktime($start_arr['hour'], $start_arr['minute'], $start_arr['second'],    $start_arr['month'], $start_arr['day'], $start_arr['year']);
$start_date_int = date('Ymd', $start_stamp);

$end_arr = date_parse($end);
$end_stamp = mktime($end_arr['hour'], $end_arr['minute'], $end_arr['second'], $end_arr['month'], $end_arr['day'], $end_arr['year']);
$end_date_int = date('Ymd', $end_stamp);

$today_date_int = date('Ymd');

$time_range = date('g:i a', $start_stamp) . ' to ' . date('g:i a', $end_stamp);


if ($start_date_int == $today_date_int) {
  $date = 'Today';
  if ($start_date_int < $end_date_int) {
    $time_range = 'Until ' . date('l, F jS', $end_stamp);
  }
} else {
  $date = date('l, F jS', $start_stamp);
  if ($start_date_int < $end_date_int) {
    $time_range = 'From' . date('l, F jS', $start_stamp) . ' through ' . date('l, F jS', $end_stamp);
  }
}


$output = '

    <!-- Event Block -->
    <div class="span' . $span . ' event">
    <div class="panel-group id="accordion">
      <div class="panel-heading">
        <a data-toggle="collapse" data-parent="#accordion" href="#addMore" class="btn btn-primary btn-lg">' . $title . '</a>';

if (trim($desc) && $date == 'Today') {
  $output .=  '<div id="addMore" class="panel-collapse collapse">
        <div class="panel-body">' .  trim($desc) .  '</div>';
}
$output .= '<p style="padding-left: 5px;">';
if (trim($desc) && $date != 'Today') {
  $output .= '<div id="addMore" class="panel-collapse collapse"> 
  <div class="panel-body">' .trim($desc) . '</div>';
  $output .= '<span style="color: #E8D0A9;">Date:</span> ' . $date . '<br />';
}
$output .= '<span style="color: #E8D0A9;">Time:</span> ' . $time_range . '</p></div>';

return $output;

}

这是我之前看过的有用帖子：Create Dynamic div with unique IDs - jQuery

下面是我的 calendar.php 上的代码，它使用上面的数据来生成事件日历：

<?php

            error_reporting(E_ALL); 
            ini_set('display_errors', TRUE); 
            ini_set('display_startup_errors', TRUE);

                require_once('include/event_signage.php');
                $sign = new Signage;

                // Collect and format all the data

                $hero_content = array(
                  'heading' => '',
                  'text'    => '',
                );

                $events_now_arr = $sign->databoard_get('URL');
                $events_today_arr = $sign->databoard_get('URL');
                $events_week_arr = $sign->databoard_get('URL');

                // Build the sign
                $signage = $sign->header();
                //$signage .= $sign->masthead($masthead_content);
                $signage .= '<div class="container-fluid"> <!-- container -->';

                $signage .= $sign->hero_unit($hero_content);
                $event_ids = array();

                // Happnening Now
                if (count($events_now_arr)) {
                  $signage .= '<div><h2>Right now!</h2></div>';
                  foreach ($events_now_arr as $events_arr) {
                    if (!in_array($events_arr['id'], $event_ids) && $events_arr['cal_id'] != 'community') {
                      $blocks[] = $sign->event_block($events_arr['title'], $events_arr['description'], $events_arr['start'], $events_arr['end']);
                    }
                    $event_ids[] = $events_arr['id'];
                  }
                  $signage .= $sign->gather_blocks($blocks);
                  unset($blocks);
                }

                // Happening today
                if (count($events_today_arr)) {
                  $signage .= '<div><h2>Today</h2></div>';
                  foreach ($events_today_arr as $events_arr) {
                    if (!in_array($events_arr['id'], $event_ids) && $events_arr['cal_id'] != 'community') {
                    $blocks[] = $sign->event_block($events_arr['title'], $events_arr['description'], $events_arr['start'], $events_arr['end']);
                    }
                    $event_ids[] = $events_arr['id'];
                  }
                  $signage .= $sign->gather_blocks($blocks);
                  unset($blocks);
                }


                // Happening this week
                if (count($events_week_arr)) {
                  $current_hour = date('G');
                  $cutoff = 39;
                  if ($current_hour <= 16) {
                    $cutoff = 27;
                    if ($current_hour <= 14) { $cutoff = 24; }
                    if ($current_hour <= 13) { $cutoff = 21; }
                    if ($current_hour <= 12) { $cutoff = 18; }
                    if ($current_hour <= 10) { $cutoff = 15; }
                  }

                  $signage .= '<div><h2>This Week</h2></div>';
                  $i = 0;
                  foreach ($events_week_arr as $events_arr) {
                    if (!in_array($events_arr['id'], $event_ids) && $events_arr['cal_id'] != 'community' && $i < $cutoff) {
                      $blocks[] = $sign->event_block($events_arr['title'], $events_arr['description'], $events_arr['start'], $events_arr['end'], NULL, NULL, 4);
                      $i++;
                    }
                    $event_ids[] = $events_arr['id'];
                  }

                  $signage .= $sign->gather_blocks($blocks, 3);
                  unset($blocks);
                }

                $signage .= '</div> <!-- /container -->';
                $signage .= $sign->footer();



                // Output the sign

                print $signage;
                ?>

Answer 1

你做错了。您实际上不需要为任何 div 分配唯一的 id。你只需要一些标准的 DOM 操作。例如

<div>
   calendar entry #1
   <div>more information that's hidden for entry #1</div>
   <button onclick="showMore(this);">click here for more</button>
</div>
<div>
   calendar entry #2
   <div>more information that's hidden for entry #2</div>
   <button onclick="showMore(this);">click here for more</button>
</div>

由于 DOM 中的每个元素知道它在树中的位置，您不需要在第一个容器 div 上指定特定 ID，您只需要知道点击了哪个按钮，哪个按钮这就是为什么 this 被传递到 showMore() 函数：

function showMore(obj) {
    obj.previousSibling().style.display = 'block'; // the more info div
}

当然，这段代码并不是特别“可移植”。它假定“更多信息” div 总是紧挨着“切换”按钮，但这应该足以让您大致了解。