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 中使用 partials 来改进 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 的模型而具有内部相同的 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 回答