html 单个.video元素中的两个按钮

dffbzjpn  于 2022-12-02  发布在  其他
关注(0)|答案(1)|浏览(169)

您能帮助我吗?仍然无法使代码工作。提供的答案不能解决问题。https://jsfiddle.net/c46koats/
我试图在这里提供尽可能多的信息,以得到这个代码修复,如果有任何其他的,任何其他信息,你想知道的代码,请问。
这里要解决的问题是,当单击第二个按钮**时,如何在屏幕上显示视频。
两个按钮,运行一个.video元素。这是我正在修复的代码。

<div class="video video-frame"></div>

代码应该是如何工作的,在点击一个按钮后,一个视频应该出现在屏幕上,点击X按钮返回到按钮。

发生的情况:单击第一个按钮后,屏幕上出现视频。单击第二个按钮后,屏幕上不出现视频。

这里似乎是什么问题,导致第二个按钮时,点击,而不是产生一个视频在屏幕上,将如何在代码中修复?

如何解决该问题?
**还有哪些其他信息可以帮助您确定如何修复此问题?**它以前使用2个容器、2个.video元素,在我从中删除1个容器、1个视频元素后,代码中断。
2容器/ 2 .video元素工作代码https://jsfiddle.net/7apg90wz/这是否能更好地帮助您了解如何使1容器/ 1 .video元素代码正常工作?两个按钮运行2个单独的容器/.video元素。

代码我试图在这里工作,2个按钮运行1个容器/ 1个.video元素。

我在下面提供了一个示例代码(代码片段),您可以看到,单击第一个按钮会产生一个视频,而单击第二个按钮,屏幕上不会出现视频。

我一直在努力想办法解决这个问题。
如果您有任何问题,或想了解更多信息,请提问。

我刚刚在这里被告知它与代码的这一部分有关:

第二个视频返回undefined。

function getWrapper(cover) {
    const index = players.findIndex(
      (player) => player.cover === cover
    );
    return players[index].wrapper;
  }

这有帮助吗?https://jsfiddle.net/v3btmr6a/

“getWrapper,播放器[索引]. Package 器”,未定义

function getWrapper(cover) {
    console.log('getWrapper, cover', cover)
    const index = players.findIndex(
      (player) => player.cover === cover
    );
    console.log('getWrapper, index', index)
    console.log('getWrapper, players', players)
    console.log('getWrapper, players[index]', players[index])
    console.log('getWrapper, players[index].wrapper', players[index].wrapper)
    return players[index].wrapper;
  }

此函数不将 Package 器传递给播放器

function findPlayers() {
    const allCovers = document.querySelectorAll(".cover");
    const allWrappers = document.querySelectorAll(".wrap");
    allCovers.forEach(function addToPlayers(cover, index) {
      players.push({
        "cover": cover,
        "wrapper": allWrappers[index]
      });
    });
  }

如果您的查询选择器全部(“.wrap”)只找到一个,而查询选择器全部(“. cover”)只找到两个。在这个例子中,我们使用了一个简单的方法来创建一个文档。
Image
编码:
第一个
第一个

eivnm1vs

eivnm1vs1#

当我在你的代码中放置一个调试器的时候,两次的data-id都是一样的,我想这和for of的工作方式有关。
尝试将for of循环替换为以下内容。

for (let i = 0; i < playButtons.length; i++) {
  let button = playButtons[i];
  button.addEventListener('click', function() {
    var videoContainer = document.querySelector('.video');
    let att = button.getAttribute('data-id');
    console.log(att);
    videoContainer.setAttribute('data-id', att)
  });
}

相关问题