Question

我正在尝试创建动态的模态，并预先填充所点击的项目的详细信息。这是我的代码：

HTML：

{foreach from=$flowers3 item=row}

{foreach from=$row item=item}

  <div class="item col-lg-4 col-md-4 col-sm-4 col-xs-12">
    <div class="product">
      <div class="image">
        <div class="quickview">

          <a alt="Quick View" class="btn btn-xs  btn-quickview" data-target="#modal" data-toggle="modal"> View </a>
        </div>

        <a href="#">
          <img class="item_thumb img-responsive" src="img/{$item.im}" alt="img">
        </a>
      </div>
      <div class="description">
        <h4 class="item_name">{$item.title}</h4>

        <p class="item_price">
          small&nbsp;
          <input type="Radio" name="product" value="{$item.id}s" style="border:0;cursor:pointer;" />
          <span style="font-weight: bold">${$item.ps|money:0}</span>&nbsp;|&nbsp; med&nbsp;

          <input type="Radio" name="product" value="{$item.id}m" style="border:0;cursor:pointer;" />
          <span style="font-weight: bold">${$item.pm|money:0}</span>&nbsp;|&nbsp; lg&nbsp;

          <input type="Radio" name="product" value="{$item.id}l" style="border:0;cursor:pointer;" />
          <span style="font-weight: bold">${$item.pl|money:0}</span>
        </p>
      </div>

      <div class="action-control">
        <a href="javascript:;" onClick="mySubmit()">
          <span class="button-fill grey">
            <i class="glyphicon glyphicon-shopping-cart">
                </i> Add to cart </span>
        </a>
      </div>
    </div>
  </div>
{/foreach}
{/foreach}

这是PHP：

<?php
    $GLOBALS['flowers']=getFlowers();

function &getFlowers(){
    static $flowers;
    if(!isset($flowers)){
        $flowers=array(
'1'=>array('im'=>'store-a1.jpg','title'=>'CocoChanel','description'=>' Fashion fades.'),
'2'=>array('im'=>'store-a2.jpg','title'=>'The Royal Jewels','description'=>'Fit for any Queen.'),);}

$i=1;
foreach($flowers as $k=>&$v){
    $v['id']=$k;
    $v['num']=$i++;}
return $flowers;}
?>

以下是模式：

            <!--modal -->

        <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <button aria-hidden="true" data-dismiss="modal" class="close" type="button"> ×</button>
                    <div class="col-lg-5 col-md-5 col-sm-5  col-xs-12">
                        <!-- product Image -->
                        <div class="main-image  col-lg-12 no-padding style3 modal-image">
                            <a class="product-largeimg-link" href="#">
                                <img src="img/{$item.imb}" class="img-responsive product-largeimg" alt="img">
                            </a>
                        </div>
                        <!--/image-->
                    </div>
                </div>
                <!--/ product Image-->
                <div class="col-lg-7 col-md-7 col-sm-7 col-xs-12 modal-details no-padding">
                    <div class="modal-details-inner">
                        <h1 class="product-title">{$item.title}</h1>

                        <div class="details-description">
                            <p>{$item.description}</p>
                        </div>

                        <div class="clear"></div>
                    </div>
                </div>
            </div>
        </div>

        <!--/modal -->

当我在{foreach}标签中添加模态时，它只会填充一个特定项目的信息（取决于我放置它的位置。例如：它可能是第一个项目，或者如果我将它放在{ foreach from = $ flowers3 item = row}它将是第一行的最后一行）但我无法更新特定的＆＃34;快速查看＆＃34;点击了。

提前感谢您的帮助!!

Answer 1

将项目的属性存储在html中项目的数据属性中：

<div class="item ..." ... data-title="Nice flower" data-price="€1,20" > ... </div>

现在使用一些javascript来更新模态。 jQuery示例：

$('.item').click(function(){
var el = $(this);
$('.modal .product-title').text(el.attr('data-title'));
// and the rest of the properties, then open the modal
});

动态php模式

1 个答案: