06/07 如何參數傳值??

2017-06-07 置頂文章

120
0
lightbox

今天遇到一個小問題

在foreach迴圈裡

設置lightbox

建立觸發點到

另一個show的頁面

則不能在這迴圈執行

不然會顯示出多張圖片

所以我利用參數傳值的方式

將觸發的圖片參數

傳到lightbox的內頁裡

解決方式如下

<div>
    <h2 style="text-align:center">產品型錄</h2>
    <hr />
    <div class="row">
        @if (Model.L_list.Count > 0)
        //有資料才跑foreach，沒資料就跑else此頁面尚無資料
        {
            foreach (var item in Model.L_list)
                //跑foreach，定義傳送的資料為item
            {
                //以下是套用bootstrap建立多個box框
                <div class="box a col-xs-12 col-sm-6 col-md-4 col-lg-3">
                    <div class="photobox">
                        @*<a href="~/TINP/Home/talentCatalogdata?FRM_FARMER_ID=@Model.FRM_FARMER_ID">*@
                            @*<div class="tc-title">@item.PRODUCT_NAME</div>*@
                            
                        <div class="photo inline">
                            <!--觸發lightbox的觸控點-->
                            <!--原本是document.getElementById('lightbox').style.display = 'inline'-->
                           <!-- 把它變成<div onclick="fake_send('item.PHOTO_NAME')">-->
                            <div onclick="fake_send('@item.PHOTO_NAME')">
                            <!--觸控點上的照片-->
                                <img src="~/Uploads/FrmProdPhoto/@item.PHOTO_NAME" style="width:250PX">
                            </div>
                        </div>
                        @*</a>*@
 
                    </div>
                </div>
 
            }
            <!--進入內頁，再點擊後會將lightbox使用display:none關閉掉-->
                          <div id="lightbox" class="lightbox" style="display:none"
                             onclick="document.getElementById('lightbox').style.display='none';">
                              <!--show出內頁的圖片-->
                            <table class="lightbox_table">
                                <tr>
                                    <td class="lightbox_table_cell" align="center">
                                        <!--內頁的圖片區域-->
                                        <div id="lightbox_content" style="width:300px; background-color:white; border:5px solid black;">
                                            <!--圖片路徑放""空的就可以傳 js裡面的$('#showimg').attr('src', '/Uploads/FrmProdPhoto/' + i_fake)-->
                                            <img id="showimg" src="">
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </div>
 
        }
        else
        {
            <div class="setupcontext">
                <p>此頁面尚無資料</p>
            </div>
        }
 
    </div> 
</div>

以下為js呼叫參數的部分

<script>
 
    function fake_send(i_fake) {
        document.getElementById('lightbox').style.display = 'inline';
        console.log(i_fake);
        $('#showimg').attr('src', '/Uploads/FrmProdPhoto/' + i_fake)
    }
</script>

lightbox

回首頁