Question

我正在使用Bootstrap构建一个零售网站。对于产品，有一个带有“更多信息”按钮的缩略图，可以加载模态。模态内部是一个iframe，其中包含更多自行车信息。当我加载页面时，它会加载每个iframe（大约60）。我想弄清楚如何在点击相应的按钮时加载iframe（var bike_modal_descriptions_giant）。

我有网站在这里进行测试：Site

我正在使用javascript循环来填充缩略图。 Screenshot of thumbnails.

从其他文件中读取以填充缩略图的脚本，仅针对每个品牌进行了更改：

<script>
for (i = 0; i < num_items_giant; i++) {
    if (i % 3 == 0) {
        document.getElementById('catalogue').innerHTML += '<div class="row">';
    }
    document.getElementById('catalogue').innerHTML += '<div class="col-sm-6 col-md-4">'
        + '<div class="thumbnail">'
        + '<img src=' + bike_pics_giant[i] + '>'
        + '<div class="caption">'
        + '<h3>' + bike_titles_giant[i] + '</h3>'
        + '<p>' + bike_descriptions_giant[i] + '</p>'
        + '<p><button onclick="" type="button" class="btn btn-default" id="btn-giant' + i + '">More Info</button></p>'
        + '<div class="modal fade" id="modal-giant' + i + '" role="dialog">'
        + '<div class="modal-dialog">'
        //<!-- Modal content-->
        + '<div class="modal-content">'
        + '<div class="modal-header">'
        + '<button type="button" class="close" data-dismiss="modal">&times;</button>'
        + '<h4 class="modal-title">' + bike_titles_giant[i] + '</h4>'
        + '</div>'
        + '<div class="modal-body">'
        + '<p>' + bike_modal_descriptions_giant[i] + '</p>'
        + '</div>'
        + '<div class="modal-footer">'
        + '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>'
        + '</div>'
        + '</div>'
        + '</div>'
        + '</div>'
        + '</div>'
        + '</div>'
        + '</div>';
    if (i % 3 == 0) {
        document.getElementById('catalogue').innerHTML += '</div>';
    }
}
</script>

模态脚本：

<script>
/* Giant */
for (i = 0; i < num_items_giant; i++) {
    setupButton("btn-giant" + i, "modal-giant" + i);
}

/* Liv */
for (i = 0; i < num_items_liv; i++) {
    setupButton("btn-liv" + i, "modal-liv" + i);
}

function setupButton(button, modal){
    $(document).ready(function(){
        $("#" + button).click(function(){
            $("#" + modal).modal();
        });
    });
}
</script>

模态内容文件的截断版本。每个部分都是一个数组，每一行都创建一个新的缩略图：

var num_items_giant = 38;
var bike_pics_giant = ["pictures/bikes/2016/road/Propel/Propel-Adv-SL-0/Propel-Advanced-SL-0-Comp.jpg",
             "pictures/bikes/2016/road/Propel/Propel-Adv-SL-Team/Propel-Adv-SL-Team.jpg"];
var bike_titles_giant = ["Giant Propel Advanced SL 0",
               "Giant Propel Advanced SL Team"];
var bike_descriptions_giant = ["This pro peleton standout is the pinnacle of aero road. A killer in the sprints, with sublime overall ride quality.<br><strong>$9000</strong>",
                     "This pro peleton standout is the pinnacle of aero road. A killer in the sprints, with sublime overall ride quality.<br><strong>$6900</strong>";
var bike_modal_descriptions_giant = ["<iframe style=\"border:none\" width=\"710\" height=\"700\" src=\"https://www.giantretailacademy.com/go/?c=US&axid=600043\"></iframe>",
                            "<iframe style=\"border:none\" width=\"710\" height=\"700\" src=\"https://www.giantretailacademy.com/go/?c=US&axid=615001\"></iframe>";

按钮上的模态内部加载iframe单击

0 个答案: