点击删除iFrame src数据属性

Question

我有一个vimeo播放器，它的src ID是从div data-vimeo属性中拾取的。

下面的例子：

<div class="js-video-btn" data-vimeo="286031821">Button Link</div>

我的vimeo播放器的iframe看起来像这样

<iframe class="vimeo-frame" src='https://player.vimeo.com/video/' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

直到选择了data-vimeo属性，该属性才能完成此https://player.vimeo.com/video/286031821的src URL

我用jQuery实现了这一点，并且一切正常。 但是，我想做的是单击另一个按钮，它删除了data-vimeo属性，使src URL保持原来的样子： https://player.vimeo.com/video/ : https://player.vimeo.com/video/

这是我的jQuery：

$('.js-video-btn').click(function() {
    var video=$(this).data('vimeo');
    $('.vimeo-frame').attr('src', $('.vimeo-frame').attr('src') + video );
});

$('.video-close').click(function(){
    $('.vimeo-frame').removeAttr('src', $('.vimeo-frame').attr('src'));
});

我正在使用removeAttr，但是此操作会删除整个URL，而我只想删除data-vimeo ID。 实现此目标的最佳方法是什么？

这也是jsFiddle 。

Answer 1

删除最后一个正斜杠之后的所有字符。
另外，不要多次添加视频ID。

这是一个工作示例：

 $(".js-video-btn").click(function() { var video = $(this).data("vimeo"); var $videoFrame = $(".vimeo-frame"); var src = $videoFrame.attr("src"); // Make sure video id is not added twice if (src.length - 1 === src.lastIndexOf("/")) { $videoFrame.attr("src", src + video); } }); $(".video-close").click(function() { var $videoFrame = $(".vimeo-frame"); var src = $videoFrame.attr("src"); // Trim the characters after the last forward slash $videoFrame.attr("src", src.substr(0, src.lastIndexOf("/") + 1)); }); 

 .link-txt { cursor: pointer; background: red; padding: 10px; color: white; text-align: center; } .video-close { width: 100%; display: block; background: blue; color: white; border: none; padding: 10px; margin: 10px 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="link-txt js-video-btn" data-vimeo="286031821">Button Link to add video to iframe</div> <section class="video-popup"> <div class="video-inner"> <div class="clearfix"> <button type="button" class="btn btn-secondary video-close">close video</button> </div> <div class='o-embed-container'> <iframe class="vimeo-frame" src='https://player.vimeo.com/video/' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> </div> </div> </section> 

Answer 2

听起来您的网址看起来像https://player.vimeo.com/video/123，而您只想要https://player.vimeo.com/video/

如果是这种情况，请查看下面的代码，使用它来设置src。

var test="https://player.vimeo.com/video/123"
test = test.substr(0,test.lastIndexOf("/"));

这将保留“ https://player.vimeo.com/video ”的结果