时间戳

首页 > 解决方案 > 插入iframe并通过js删除

javascript - 插入iframe并通过js删除

问题描述

此代码附加一个 vimeo 视频。但是当 vimeo 视频出现时，我无法关闭它buttonClose。当我按下buttonClose它应该删除容器vimeoPop。有什么问题？

<div class="vimeo-video">
         <div class="video">
            <a class="" href="#" yt-id="535941">
                <img>
            </a>
         </div>
</div>



var i = 1;
  var str1 = "n";
  $(".vimeo-video").each(function (index, value) {
    var maindiv = str1 + i;
    $(this).addClass(maindiv);
    $(".vimeo-video." + maindiv + " a").click(function (e) {
      e.preventDefault();
      var src = $(this).attr("yt-id");
      var link = "https://player.vimeo.com/video/" + src + "?autoplay=1";
      var iframe =
        '<div class="vimeoPop"><div class="buttonClose"><span></span><span></span></div><iframe frameborder="0" src="' +
        link +
        '" allowfullscreen></iframe></div>';
      $(".vimeo-video." + maindiv + " .video").append(iframe);
    });
    $(document).on('click', '.buttonClose', function () {
      $(".vimeo-video" + maindiv + " .vimeoPop").remove();
    });
    i++;
  });

标签： javascriptjquery

解决方案

您.在删除行缺少类的选择器

而不是选择“.vimeo-video.n1”，而是选择“.vimeo-videon1”

var i = 1;
  var str1 = "n";
  $(".vimeo-video").each(function (index, value) {
    var maindiv = str1 + i;
    $(this).addClass(maindiv);
    $(".vimeo-video." + maindiv + " a").click(function (e) {
      e.preventDefault();
      var src = $(this).attr("yt-id");
      var link = "https://player.vimeo.com/video/" + src + "?autoplay=1";
      var iframe =
        '<div class="vimeoPop"><div class="buttonClose"><span>Close</span><span></span></div><iframe frameborder="0" src="' +
        link +
        '" allowfullscreen></iframe></div>';
      $(".vimeo-video." + maindiv + " .video").append(iframe);
    });
    $(document).on('click', '.buttonClose', function () {
      $(".vimeo-video." + maindiv + " .vimeoPop").remove();
    });
    i++;
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="vimeo-video">
         <div class="video">
            <a class="" href="#" yt-id="535941">
                <img>Click me
            </a>
         </div>
</div>

推荐阅读