使用按钮显示特定的 Div 并隐藏 rest

Question

OK, I'm still mind boggled.好吧，我还是很困惑。 I've done a ton here, and still can't see why the things aren't loading.我在这里做了很多，但仍然不明白为什么没有加载这些东西。 I thought maybe it had to do with CORS, so I added a cookies rule to the script, but even then I find this weird, because I was able to display the podcast player locally just fine when I wasn't trying to hide and activate one or the other.我想这可能与 CORS 有关，所以我在脚本中添加了 cookies 规则，但即便如此我还是觉得这很奇怪，因为当我没有尝试隐藏和激活时我能够在本地很好地显示播客播放器非此即彼。

The code seems to be just fine however, I can't seem to pick out the problem.代码似乎还不错，但我似乎无法找出问题所在。

document.cookie = "cookiename=cookievalue; SameSite=None; Secure; path="
  // Add active class to default player and button
  document.getElementById("player1-button").classList.add("active");
  document.getElementById("player1").classList.add("active");

  // Add event listeners to the buttons to listen for clicks and execute a function
  document.getElementById("player1-button").addEventListener("click", function() {
    //Remove active class from the current player and button
    document.getElementById("player2-button").classList.remove("active");
    document.getElementById("player2").classList.remove("active");
    // Add active class to player1 and player1-button
    document.getElementById("player1").classList.add("active");
    this.classList.add("active");
  });
  document.getElementById("player2-button").addEventListener("click", function() {
    //Remove active class from the current player and button
    document.getElementById("player1-button").classList.remove("active");
    document.getElementById("player1").classList.remove("active");
    // Add active class to player2 and player2-button
    document.getElementById("player2").classList.add("active");
    this.classList.add("active");
  });

This is my new javascript.这是我的新 javascript。

Furthermore, here's the related CSS:此外，这是相关的 CSS：

.podcast-player div:not(.active) {
  display: none;
}
.podcast-player div.active {
  display: block;
  
    }

and as well, the HTML for the player element:以及播放器元素的 HTML：

<div class="podcast-player">
          <!-- add the 2 embedded players here -->
          <div id="player1">
            <div id='buzzsprout-small-player'></div>
            <script type='text/javascript' charset='utf-8' src='https://www.buzzsprout.com/2107108.js?container_id=buzzsprout-small-player&player=small'></script>
          </div>
          <div id="player2">
            <div id='buzzsprout-large-player'></div>
            <script type='text/javascript' charset='utf-8' src='https://www.buzzsprout.com/2107108.js?container_id=buzzsprout-large-player&player=large'></script>
          </div>
        </div>

I've been combing through this for the past few hours, and to me it all seems like it should work.在过去的几个小时里，我一直在梳理这个问题，对我来说，这一切似乎都应该奏效。 I'm baffled.我很困惑。

Answer 1

Can you check the following code, and let me know if this is what you were looking for?你能检查下面的代码，让我知道这是否是你要找的吗？

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .player {
      display: none;
    }

    .player.active {
      display: block;
    }
  </style>
</head>

<body>
  <div class="player active" id='buzzsprout-small-player'></div>
  <div class="player" id='buzzsprout-large-player'></div>

  <button disabled id="small-player-button">Activate Player Small</button>
  <button id="large-player-button">Activate Player Large</button>

  <script type='text/javascript' charset='utf-8'
    src='https://www.buzzsprout.com/2107108.js?container_id=buzzsprout-large-player&player=large'></script>
  <script type='text/javascript' charset='utf-8'
    src='https://www.buzzsprout.com/2107108.js?container_id=buzzsprout-small-player&player=small'></script>
  <script>
    // Add event listeners to the buttons to listen for clicks and execute a function
    document.getElementById("small-player-button").addEventListener("click", function () {
      //Remove active class from the large player
      document.getElementById("buzzsprout-large-player").classList.remove("active");
      // Add active class to small player
      document.getElementById("buzzsprout-small-player").classList.add("active");

      // Enable large player button
      document.getElementById("large-player-button").disabled = false;
      // Disable small player button
      this.disabled = true;
    });

    document.getElementById("large-player-button").addEventListener("click", function () {
      //Remove active class from the small player
      document.getElementById("buzzsprout-small-player").classList.remove("active");
      // Add active class to large player
      document.getElementById("buzzsprout-large-player").classList.add("active");

      // Enable small player button
      document.getElementById("small-player-button").disabled = false;
      // Disable large player button
      this.disabled = true;
    });

  </script>

</body>

</html>

使用按钮显示特定的 Div 并隐藏 rest

问题描述

1 个解决方案

解决方案1
0 2023-01-11 11:50:19

使用按钮显示特定的 Div 并隐藏 rest

问题描述

1 个解决方案

解决方案1 0 2023-01-11 11:50:19

解决方案1
0 2023-01-11 11:50:19