Question

你好我有一个按钮，点击一个模态时触发，并将一些图像添加到应该作为轮播的内容。我不知道如何解释所以我会给你一个问题的链接。我的脚本不能正常工作，因为它触发模态，附加图像，但首先触发模态，因此它不会在轮播中显示图像。如果我关闭模态，然后再次按下按钮，图像就在那里。这是LINK WITH PROBLEM

按餐厅然后在画廊上查看问题。按两次画廊。附加图像的脚本

<script>
$(\'body\').on(\'click\',\'.gal\',function(e){
  e.preventDefault();
   var href = $(this).attr(\'href\');
    $.getJSON(href, function(data) {

   $.each(data, function(key, val) {
    $(\'.hidden\').append(\' <div class="item" id="image-1"> <img class="gal img-responsive" title="Image 11" src="http://rezerv.city/clienti/carulcuflori/imagini/galerie/\' +val.poze + \'"></div> \');
});
     });
});
      </script>

模态和轮播的

脚本，都由同一个按钮触发

<script>
       /* activate the carousel */
$("#modal-carousel").carousel({interval:false});

/* change modal title when slide changes */
$("#modal-carousel").on("slid.bs.carousel", function () {
  $(".modal-title").html($(this).find(".active img").attr("title"));
})

/* when clicking a thumbnail */
$(document).on("click", ".galz .gal", function() {

    var content = $(".carousel-inner");
    var title = $(".modal-title");

    content.empty();
    title.empty();

    var id = this.id;
    var repo = $("#img-repo .item");
    var repoCopy = repo.filter("#" + id).clone();
    var active = repoCopy.first();

    active.addClass("active");
    title.html(active.find("img").attr("title"));
    content.append(repoCopy);

    // show the modal
    $("#modal-gallery").modal("show");

 });
 </script>

Answer 1

http://jsfiddle.net/u5sok220/2/

您必须将活动课程添加到第一个项目

<div class="item active"><img class="gal img-responsive" ... </div>
<div class="item"><img class="gal img-responsive" ... </div>
<div class="item"><img class="gal img-responsive" ... </div>
...

Answer 2

可能发生的事情是$（document）.on事件和$（＆＃34; body＆＃34;）事件之间的竞争条件。这导致当getJSON回调完成时，弹出窗口中的.hidden div尚未填充。

我建议您更改以下代码，以防止这种竞争条件＆＃39;：

<script>
$('body').on('click','.gal, .galz .gal',function(e){
  e.preventDefault();
   var href = $(this).attr('href');
    $.getJSON(href, function(data) {

       renderPopup();
       $.each(data, function(key, val) {
         $(\'.hidden\').append(' <div class="item" id="image-1"> <img class="gal img-responsive" title="Image 11" src="http://rezerv.city/clienti/carulcuflori/imagini/galerie/' +val.poze + '"></div> ');
});
     });
});
</script>

你的第二个剧本变为：

<script>
       /* activate the carousel */
$("#modal-carousel").carousel({interval:false});

/* change modal title when slide changes */
$("#modal-carousel").on("slid.bs.carousel", function () {
  $(".modal-title").html($(this).find(".active img").attr("title"));
})

/* when clicking a thumbnail */
var renderPopup = function() {

    var content = $(".carousel-inner");
    var title = $(".modal-title");

    content.empty();
    title.empty();

    var id = this.id;
    var repo = $("#img-repo .item");
    var repoCopy = repo.filter("#" + id).clone();
    var active = repoCopy.first();

    active.addClass("active");
    title.html(active.find("img").attr("title"));
    content.append(repoCopy);

    // show the modal
    $("#modal-gallery").modal("show");

 };
 </script>

或者，你也可以将它附加到原始代码，它也将在JSON请求准备好之前填充对话框：

// show the modal
$(function(){
    $("#modal-gallery").modal("hide");
});

Answer 3

我认为这是因为模式在画廊准备好之前出现，试试这个。

<script>
$(function() {
    $(\'body\').on(\'click\',\'.gal\',function(e){
        e.preventDefault();
        var href = $(this).attr(\'href\');
        $.getJSON(href, function(data) {

            $.each(data, function(key, val) {
                $(\'.hidden\').append(\' <div class="item" id="image-1"> 
                <img class="gal img-responsive" title="Image 11"
                src="http://rezerv.city/clienti/carulcuflori/imagini/galerie/\' +val.poze + \'"></div>
                \');
            });
        });
    });
});
</script>

jquery附加图像然后将它们放入旋转木马

3 个答案: