需要為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;

}

這是我之前看過的有用的文章： 使用唯一ID創建動態div-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始終將始終位於“切換”按鈕的旁邊，但這應該足以為您提供總體思路。