如何在使用jQuery单击按钮后将src添加到iframe中?

cdmah0mi  于 2023-01-30  发布在  jQuery
关注(0)|答案(1)|浏览(150)

我想添加一个链接从数据嵌入到iframe作为一个源代码,但它不工作。请帮助我,我是新的jQuery。这是我的代码;

function initPlaylist() {

  const videoIframe = document.querySelector('#iframe-embed');

  const videoItems = document.querySelectorAll('.vid-item');

  videoIframe.src = window.atob(videoItems[0].getAttribute('data-embed'));

  for (var i = 0; i < videoItems.length; i++) {

    videoItems[i].addEventListener("click", function(event) {

      videoIframe.src = window.atob(event.target.getAttribute('data-embed'));

      $(this).addClass('selected').siblings().removeClass('selected');

    });

    $(videoItems).first().addClass('selected');

  }

}(jQuery);
<div id="player-wrap">
  <div class="responsive-vid">
    <iframe allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" marginheight="0" marginwidth="0" scrolling="no" frameborder="0" height="350px" id="iframe-embed" width="100%" target="_blank"></iframe>
    <div class="playlist-wrap">
      <div class="video-list">
        <a class="vid-item" data-embed="https://asianhdplay.net/streaming.php?id=MzU1ODc0&title=Miracle+of+Love+%282022%29+episode+17&typesub=SUB">Episode 01</a>

        <a class="vid-item" data-embed="https://asianhdplay.net/streaming.php?id=MzU1ODc0&title=Miracle+of+Love+%282022%29+episode+17&typesub=SUB">Episode 02</a>

        <a class="vid-item" data-embed="https://asianhdplay.net/streaming.php?id=MzU1ODc0&title=Miracle+of+Love+%282022%29+episode+17&typesub=SUB">Episode 03</a>

        <a class="vid-item" data-embed="https://asianhdplay.net/streaming.php?id=MzU1ODc0&title=Miracle+of+Love+%282022%29+episode+17&typesub=SUB">Episode 04</a>

        <a class="vid-item" data-embed="https://asianhdplay.net/streaming.php?id=MzU1ODc0&title5=Miracle+of+Love+%282022%29+episode+17&typesub=SUB">Episode 05</a>

        <a class="vid-item" data-embed="https://asianhdplay.net/streaming.php?id=MzU1ODc0&title=Miracle+of+Love+%282022%29+episode+17&typesub=SUB">Episode 06</a>

      </div>
    </div>
  </div>

enter image description here

ffscu2ro

ffscu2ro1#

你可以这样做

$(".vid-item").on('click', function() {
            $("#iframe-embed").attr('src', $(this).attr('data-embed'));

            //or 
            $("#iframe-embed").attr('src', $(this).data('embed'));

            //or
            $("#iframe-embed").prop('src', $(this).prop('data-embed'));
        })

相关问题