點擊刪除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 ”的結果