javascript - 在事件 Bootstrap 轮播幻灯片中定位 iframe 元素并将哈希添加到 SRC 属性？

Question

我将 iframe 元素嵌入 Bootstrap carousel 中在我的页面上。这是我的 HTML:

<div id="carousel1" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel1" data-slide-to="0" class="active"></li>
<li data-target="#carousel1" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<iframe src="http://iframe.url/index.html" width="160" height="600" frameborder="0"></iframe>
</div>
<div class="item">
<iframe src="http://another.iframe.url/index.html" width="300" height="600" frameborder="0"></iframe>
</div>
</div>
<a class="left carousel-control" href="#carousel1" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel1" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

我需要帮助编写一个以可见幻灯片为目标并 append #play 的脚本。到 iframe 元素的 SRC 属性。我想我可以通过定位 Bootstrap .item .active 来做到这一点当幻灯片在轮播中可见时自动设置的类。

例如，事件幻灯片 iframe 元素应如下所示:<iframe src="http://another.iframe.url/index.html#play" width="300" height="600" frameborder="0"></iframe>

如何使用 Javascript 或 jQuery 完成此任务？感谢您的帮助。

我开始在这里写一个实现这一目标的想法，但它不起作用:

// Trigger Active Slide to Play
$('.carousel').carousel().on('slid.bs.carousel', function(e) {
$(this).find('.active.item').('iframe', e.relatedTarget) {
    $(this).attr('src', $(this).attr('src') + '#play');
});
});

编辑我一直在尝试想出一个解决方案。这仍然不起作用，但我认为它越来越接近我正在寻找的东西:

// Trigger Active Slide to Play
$('.carousel').on('slid.bs.carousel', function() {
var activeItem = $(this).find('.active.item');
if (parent().is(activeItem)) {
    $(this).find('iframe').attr('src', function() {
        return $(this).attr('src') + "#play"
    })
    }
});

Answer 1

有一个工作代码:

    $('.carousel').on('slide.bs.carousel', function () {
      $(this).find('.active.item').attr('src', function(){
        return $(this).attr('src') + "#play"
      })
     });

您在“slide.bs.carousel”中出现了拼写错误，也没有必要尝试使用事件，否则逻辑就很好。

请确保在 #play 变为非事件状态时将其删除。