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

Question

我有一个 popin/modal(使用 Hubspot Messenger )，其中包含 Bootstrap 3 轮播。在轮播的每张幻灯片上都会出现不同的“社交嵌入”(例如 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...

我的问题是，当我加载 modal/popin 时，所有脚本都会被执行，也就是说，在上面的示例中，and 的两个 block ...正如预期的 $("ul.messenger.messenger- fixed") 的宽度设置为最新执行的 block ，这里指的是 twitter_size。因此，即使第一个 block 也会将 $("ul.messenger.messenger-fixed") 的 width' 设置为 twitter_size 而不是我想要的，也就是说宽度等于 insta_size。

基本上我需要的是知道如何阻止代码执行所有脚本或告诉他当每张幻灯片变得可见(=事件)时重新计算它的值。

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

Answer 1

我不是用过 ruby​​ 的人，但肯定只有到达的 'if' block 内的脚本被调用？难道不是这样吗？无论哪种方式，您都可以尝试以下操作；

初始化所有轮播的代码。

...
<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 的 Angular 来看，但也许你可以挽救一些东西。利用分配给各个项目的数据属性，但您可以使用其他属性或查看子项(如果它们包含您需要的信息)。