时间戳

首页 > 解决方案 > 单击时删除 iFrame src 数据属性

javascript - 单击时删除 iFrame src 数据属性

问题描述

我有一个 vimeo 播放器，它的 src ID 是data-vimeo从div.

下面的例子：

<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>

直到它拾取完成此URL的data-vimeo属性srchttps://player.vimeo.com/video/286031821

我正在使用 jQuery 实现这一点，并且一切正常。但是，我想做的是单击另一个按钮，它会删除 data-vimeo 属性，使srcURL 保持原样：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-vimeoID。实现这一目标的最佳方法是什么？

这里也是jsFiddle。

标签： javascriptjqueryhtml

解决方案

删除最后一个正斜杠后的所有字符。
此外，不要多次添加视频 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>

推荐阅读