Question

我有一个包含Bootstrap 3轮播的popin / modal（使用Hubspot Messenger）。在旋转木马的每张幻灯片上都有一个不同的社交嵌入＆＃34; （如facebook或twitter embed）出现，我想根据图像的大小调整模态/ popin的宽度。

我基本上做的是改变模态的宽度（幻灯片的情况来自后台，所以使用我的后端语言Ruby）：

$("ul.messenger.messenger-fixed").css("width",insta_classic_size);

整个代码是：

<div class="item <% if index == 0 %>active<% end%>">      

        <% if slide['modal_slide_type'] == "instagram" %>
          <script>  
              var insta_size = Math.max( Math.floor(embedWidth), 320);                      
              $("ul.messenger.messenger-fixed").css("width",insta_size); 
          </script>

        <% elsif slide['modal_slide_type'] == "twitter" %>   

          <script> 
            var twitter_size = Math.floor(embedWidth);           
            $("ul.messenger.messenger-fixed").css("width",twitter_size); 

          </script>

       and so on... many different other types of slides...

我的问题是，当我加载模态/ popin时，所有脚本都被执行，也就是说在上面的例子中，两个和...的块预期值为$（＆＃34; ul.messenger .messenger-fixed＆＃34;）的宽度设置为正在执行的最新块，这里的意思是twitter_size。所以即使是第一个区块也会有$（＆＃34; ul.messenger.messenger-fixed＆＃34;）的宽度＆＃39; width设置为twitter_size而不是我想要的，也就是说宽度等于insta_size。

基本上我需要的是知道如何防止代码执行所有脚本或告诉他重新计算每张幻灯片上的值（当它变得可见时显示<= strong）。

我尝试使用一些BS carousel events但未能成功。

Answer 1

我不是使用过ruby的人，但肯定只调用了到达'if'块中的脚本？那不是这样吗？无论哪种方式，您都可以尝试以下方法;

初始化所有轮播的代码。

...
<div id="myCarousel" class="carousel slide" data-ride="carousel">
...

旋转木马内的物品;

<div class="item" data-slidetype="twitter">
  <img src="..." alt="...">
  <div class="carousel-caption">
    ...
  </div>
</div>

<div class="item" data-slidetype="instagram">
  <img src="..." alt="...">
  <div class="carousel-caption">
    ...
  </div>
</div>

然后是以下javascript;

myCarousel.on('slide.bs.carousel', function (e) {
    console.log(e.relatedTarget.dataset.slidetype);
});

控制台将根据活动幻灯片输出'twitter'或'instagram'。然后，您可以使用此事件来触发您想要的任何计算。

myCarousel.on('slide.bs.carousel', function (e) {
    var activeSlide = e.relatedTarget.dataset.slidetype
    if ( activeSlide == "instagram" ) {
        // Insta calculations
    } else if ( activeSlide == "twitter" ) { 
        // twitter calculations
    }
});

这一切都来自JS的观点，但也许你可以挽救一些东西。使用分配给各种项目的数据属性，但如果它们包含您需要的信息，您可以使用其他属性或查看子项。

在每个Bootstrap轮播幻灯片上重新计算相同的javascript变量

1 个答案: