Question

我有width=300px和height=300px的转盘我想显示模态并克隆所有旋转木马dom元素以查看更大的颜色每件事都按照我的意愿复制。
但是点击下一个上一个按钮时，较旧的旋转木马不会移动模态中的旋转木马我还更改了新轮播中的id和新轮播中的href，但仍然没有滚动点击＆＃39; next / prev或指标＆＃39;

$('#oldCarousel .item img').click(function(){
    var carousel = $(this).parents('#oldCarousel');
    carousel.attr('id','NewCarousel');
    carousel.find('a[href="#oldCarousel"]').attr('href','#NewCarousel');
    $('#myModal .modal-dialog').html(carousel.clone());
    //$('#myModal .modal-content,#myModal .item,#myModal .modal-dialog').css({'width':'95%','height':'95%','max-height':'95%'});
    $('#myModal .modal-dialog').css('padding','0px');
    $('#myModal').modal('show');
    $('#NewCarousel').carousel().carousel(0);
});

这是jsfiddle链接：https://jsfiddle.net/yo0gxtd9/

Answer 1

如果您只是想让自己的旋转木马更大，那么使用例如某些CSS类来调整width和height是不是更好？

JS：

var elements = $("#oldCarousel").add("#oldCarousel .item img");

$('#oldCarousel .item img').click(function(){
    elements.toggleClass("fullscreen");
});

CSS：

   .fullscreen {
      width: 100vw;
      height: 100vh;
    }

    img.fullscreen {
      min-width: 100vw;
      min-height: 100vh;
      width: auto;
      height: auto;
    }

请检查小提琴： https://jsfiddle.net/yo0gxtd9/3/

Answer 2

以下是我已经注意到并在此处提供此解决方案的几个问题：

e.stopImmediatePropagation() - 当您点击图片时，您需要停止将事件冒泡到其父级，以便在您点击carousel

image

carousel.clone() - 您正在更改carousel属性，这会影响原始属性，然后在使用html时插入clone。这导致carousel变得相同attributes/id。因此，您需要克隆first and then change the属性值。

以下是您的代码的更新版本。

$('#oldCarousel .item img').click(function(e){
    e.stopImmediatePropagation(); //stops event being propagated to its parent
    var carousel = $(this).parents('#oldCarousel').clone(); //clone it and then change attributes
    carousel.attr('id','NewCarousel');
    carousel.find('a[href="#oldCarousel"]').attr('href','#NewCarousel');
    $('#myModal .modal-dialog').html(carousel); //attach the cloned version
    $('#myModal .modal-dialog').css('padding','0px');
    $('#myModal').modal('show');
    $('#NewCarousel').carousel().carousel(0);
});

<强> Here's the Updated fiddle

改变bootstrap carousel id

2 个答案: