Bootstrap外部鏈接模式繼承

所以我有這個代碼，當我點擊View Receipt鏈接時，收據圖像的外部鏈接將以模式彈出。我正在使用樹枝和苗條的框架。Bootstrap外部鏈接模式繼承

這是細枝我的HTML文件：

{% for r in results %} 
<a data-toggle="modal" href="/user/receipt/{{r.accountID}}" data-target="#myModal">View Receipt</a> 
{% endfor %} 

{% block script %} 
<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
     </div> <!-- /.modal-content --> 
    </div> <!-- /.modal-dialog --> 
</div> <!-- /.modal --> 
{% endblock %}

的route.php代碼：

$app->get('/user/receipt/:id', function($id) use($app) { 
    $db = new db(); 
    $bind = array(
    ":aid" => $id 
    ); 
    $result = $db->select("accounts", "accountID = :aid", $bind); 
    $app->render('screenshot.html', array('result' => $result)); 
});

的screenshot.html代碼：

{% for r in result %} 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
    </div> 
    <div class="modal-body"> 
    <img src="/assets/img/receipts/{{r.receipt}}" class="img-responsive"> 
    </div> 
{% endfor %}

現在一切正常。圖像以模式顯示。問題是...當頁面加載時，第一次單擊View Receipt鏈接時，所有其他鏈接將包含相同的圖像，而不是基於accountID的圖像。所有鏈接都會繼承正在單擊的第一個鏈接。我究竟做錯了什麼？

來源

2015-07-10 FewFlyBy

你有這個問題的一個形象？ – bassxzero

頁面完全加載後，所有鏈接都顯示其各自的收據圖像嗎？ – noahdotgansallo

@noahdotgansallo在頁面加載完成後，當你點擊一個鏈接時，它會根據模式的鏈接顯示收件圖像，w/c正確..但是當你點擊另一個鏈接時，它會顯示第一張圖片被點擊的收據。 – FewFlyBy

我不知道如何去做你現在正在做的 - 動態生成模態內容 - 但有一個選擇。

您可以改爲使用與收據ID相關的ID將它們包裝在for循環中。因此，每個模式只包含它們各自的收據圖像。

{% for r in results %} 
<a data-toggle="modal" href="/user/receipt/{{r.accountID}}" data-target="#myModal{{r.id}}">View Receipt</a> 
{% endfor %}

那麼你的模式代碼會是這個樣子......

{% for r in results %} 
<div class="modal fade" id="myModal{{r.id}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
<div class="modal-dialog"> 
    <div class="modal-content"> 
    </div> <!-- /.modal-content --> 
</div> <!-- /.modal-dialog -->

來源

2015-07-10 13:22:12 noahdotgansallo

嘿。做得好！謝謝！ – FewFlyBy

在我的專家意見中，我認爲這段代碼很好，但效率不如它的高。 – jamespick

Bootstrap外部鏈接模式繼承

回答

相關問題