在Active Bootstrap Carousel幻灯片中的目标iframe元素，然后在SRC属性中添加哈希元素

Question

我的页面上有嵌入在bootstrap旋转木马中的iframe元素。这是我的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>

我需要帮助编写一个脚本，该脚本将可见的幻灯片定位并将#play附加到iframe元素src属性上。我认为我可以通过针对旋转木马中幻灯片时自动设置的Bootstrap .item .active类来做到这一点。

例如，活动幻灯片元素应该看起来像这样： <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。