0

ここにすべてのコードを貼り付けることができましたが、役に立たないかもしれないと思ったので、重要なものを貼り付けようとしました。適切に質問していることを願っていますので、お気軽にご案内ください。以下のロジックを説明し、何が機能していないかを示します。Bootstrap には、次の方法でモデルが動的に作成されるカルーセルがあります。

私。カルーセル開始

<div class="hero-unit" style="padding-right:30px; padding-left:30px; padding-top:30px; padding-bottom: 50px;">
  <div id="myCarousel" class="carousel slide">
    <div class="carousel-inner">
    </div>
  </div>
</div>

ii. モデルへの href リンクを動的に作成する

   <div class="hero-unit" style="padding-right:30px; padding-left:30px; padding-top:30px; padding-bottom: 50px;">
     <div id="myCarousel" class="carousel slide">
      <div class="carousel-inner">

       <?php $carouselClass = "active item";
       while($r = mysql_fetch_assoc($events)) 
       { 
         ?>
          <div class="<?php echo $carouselClass; ?>">
            <?php $carouselClass = "item"; ?>
            // Here, we create model dynamically
            <a role="button" data-toggle="modal" href="#myModel<?php echo $r['_id']; ?>" ><?php echo $r['_name'] ; ?></a>
            </div>
          </div>
        </div>

iii. PHP でパーシャルを使用して Don't Repeat Yourself (DRY) 操作を改善する

  <div class="hero-unit" style="padding-right:30px; padding-left:30px; padding-top:30px; padding-bottom: 50px;">
    <div id="myCarousel" class="carousel slide">
      <div class="carousel-inner">
       <?php $carouselClass = "active item";
       while($r = mysql_fetch_assoc($events)) 
       { 
         ?>
          <div class="<?php echo $carouselClass; ?>">

            <?php $carouselClass = "item"; ?>
            // Here, we create model dynamically
            <a role="button" data-toggle="modal" href="#myModel<?php echo $r['_id']; ?>" ><?php echo $r['_name'] ; ?></a>

            <?php require '_actualModel.php'; ?>
            </div>
          </div>
        </div>

iv。_actualModel.php

  <div id="myModel<?php echo $r['_id']; ?>" class="modal hide fade" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header center">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
     </div>
     <div class="modal-body">
       <?php echo $r['_body'];  
     </div>
     <div class="modal-footer">
       <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
     </div>    </div>

カルーセルがコンテンツを循環させ、モデルがポップアップするため、これは非常にうまく機能します。ただし、同じページで同じ ID のモデルをカルーセルの外に作成したいとします。私はこのようにそれを行うつもりです。

// Here, we create model which would have the same id as one of them in the carousel
<a role="button" data-toggle="modal" href="#myModel<?php echo $r['_id']; ?>" ><?php echo $r['_name'] ; ?></a>
 <?php require '_actualModel.php'; ?>

問題は、カルーセル内のモデル (同じ ID を持つ) がその時点でアクティブな場合にのみ、カルーセルの外で作成されたモデル (同じ ID を持つ) がポップアップすることです。つまり、表示されています。アクティブでないか表示されていない場合、背景はグレー表示されますが、ポップアップ モデルは表示されません。内部の同じ ID が表示されていません - まだ画像をアップロードできません :)][3]

同じ ID のモデルを使用する理由は、それらがまったく同じ情報を持っているためであり、DRY プラクティスを実装しようとしていることを述べてもよろしいですか。インデントでごめんなさい。

4

1 に答える 1

0

可能な解決策を考え出しました。@Carsten が言ったように、同じ ID の要素を持つことは正しくありません。しかし、これは同じ問題に悩まされている人への解決策です。上記のアプローチを使用すると、一部のモーダルが同じIDを持つ可能性があるカルーセルの内側と外側から動的モーダルを作成しようとしています(問題)。

秘訣は、カルーセル モーダルに一意の識別子を与えることです。カルーセルの外でも同じことが言えます。

したがって、カルーセルを開始する前に、次を割り当てることができます。

$identifier = "carousel";

そして、$identifier を href に追加します。あれは：

<a role="button" data-toggle="modal" href="#myModel<?php echo $identifier . $r['_id']; ?>" ><?php echo $r['_name'] ; ?></a>

もちろん、モーダルには

<div id="myModel<?php echo $identifier . $r['_id']; ?>" class="modal hide fade" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">

したがって、外部に同様のモーダルを動的に作成するには、$identifier = "outside" にし、同じメソッドを使用して href とモーダルを作成します。

これが誰かに役立つことを願っています。

于 2012-12-12T12:54:12.463 に答える