javascript - 获取围绕音频按钮的链接

Question

代码 1:

您是否看到在您点击图像后，音频按钮出现并播放，并且周围没有链接。在 代码 1 上，如何启用音频按钮周围的链接？

https://jsfiddle.net/7ux1s23j/29/

<style>
  .playButton {
    width: 266px;
    height: 174px;
  }
  
  .initial {
    width: 260px;
    height: 168px;
    cursor: pointer;
    background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/BBYxKcf.jpg");
    border: 3px solid #0059dd;
    font-family: Tahoma;
    font-weight: bold;
    font-size: 30px;
    color: #0059dd;
    cursor: pointer;
    line-height: 100px;
    text-align: center;
  }
  
  .playButton.playing {
    width: 50px;
    height: 50px;
    border: none;
    cursor: pointer;
    background-color: #000000;
    margin: 62px 0 0 108px;
    fill: #aaff00;
  }
  
  .links div {
    margin: 0 0 12px 0;
  }
  
  .links a {
    display: block;
    width: 50px;
    height: 50px;
    background-color: green;
    margin: -50px 0 0;
    transition: 0.5s ease-in-out;
  }
  
  a.x1 {
    margin: 0;
  }
  
  a.x2 {
    margin-left: 54px;
  }
  
  a.x3 {
    margin-left: 108px;
  }
  
  a.x4 {
    margin-left: 162px;
  }
  
  a.x5 {
    margin-left: 216px;
  }
  
  .links a:hover,
  .links a:active,
  .links a:focus {
    background: blue;
  }
  
  .scrl a:visited {
    background: orange;
    color: #000000;
  }
  
  .scrl a:hover {
    background: red;
  }
  
  .hide {
    display: none;
  }
  
  .links div:last-child {
    margin-bottom: 0;
  }

</style>


<div class="test hide">
  <div class="links">
    <div>
      <a class="x1" href="" target="_blank"></a>
      <a class="x2" href="" target="_blank"></a>
      <a class="x3" href="" target="_blank"></a>
      <a class="x4" href="" target="_blank"></a>
      <a class="x5" href="" target="_blank"></a>
    </div>

    <div>
      <a class="x1" href="" target="_blank"></a>
      <a class="x2" href="" target="_blank"></a>
      <a class="x3" href="" target="_blank"></a>
      <a class="x4" href="" target="_blank"></a>
      <a class="x5" href="" target="_blank"></a>
    </div>

    <div>
      <a class="x1" href="" target="_blank"></a>
      <a class="x2" href="" target="_blank"></a>
      <a class="x3" href="" target="_blank"></a>
      <a class="x4" href="" target="_blank"></a>
      <a class="x5" href="" target="_blank"></a>
    </div>
  </div>
</div>

<div class="playButton">

  <div class="initial ">Links</div>

  <svg class="pause" style="display: none;margin:5px 7px;" width="36" height="40" viewbox="0 0 60 100">
    <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
  </svg>

  <svg class="play hide " style="margin:5px 9px;" width="38" height="40" viewbox="0 0 85 100">
    <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
  </svg>
</div>

<audio id="player" preload="none">
  <source src="http://hi5.1980s.fm/;" type="audio/mpeg">
  </source>
</audio>

<script>
  (function iife() {
    "use strict";

    function playButtonClickHandler() {
      var button = document.querySelector(".playButton");
      var player = document.querySelector("#player");
      document.querySelector('.playButton .initial').style.display = 'none';
      player.volume = 1.0;
      if (player.paused) {
        button.classList.add("playing");
        document.querySelector(".playButton .play").style.display = "none";
        document.querySelector(".playButton .pause").style.display = "inline-block";
        player.play();
      } else {
        document.querySelector(".playButton .play").style.display = "inline-block";
        document.querySelector(".playButton .pause").style.display = "none";
        player.pause();
      }
    }
    var playButton = document.querySelector(".playButton");
    playButton.addEventListener("click", playButtonClickHandler);
  }());

</script>

代码 2:

在这张图片上，点击图片后我会在其周围添加链接。

https://jsfiddle.net/0yxvpa09/19/

<style>
  .cover {
    width: 260px;
    height: 168px;
    cursor: pointer;
    background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/BBYxKcf.jpg");
    border: 3px solid #0059dd;
    font-family: Tahoma;
    font-weight: bold;
    font-size: 30px;
    color: #0059dd;
    cursor: pointer;
    line-height: 100px;
    text-align: center;
  }
  
  .links div {
    margin: 0 0 12px 0;
  }
  
  .links a {
    display: block;
    width: 50px;
    height: 50px;
    background-color: green;
    margin: -50px 0 0;
    transition: 0.5s ease-in-out;
  }
  
  a.x1 {
    margin: 0
  }
  
  a.x2 {
    margin-left: 54px
  }
  
  a.x3 {
    margin-left: 108px
  }
  
  a.x4 {
    margin-left: 162px
  }
  
  a.x5 {
    margin-left: 216px
  }
  
  .links a:hover,
  .links a:active,
  .links a:focus {
    background: blue;
  }
  
  .scrl a:visited {
    background: orange;
    color: #000000;
  }
  
  .scrl a:hover {
    background: red;
  }
  
  .hide {
    display: none;
  }
  
  .links div:last-child {
    margin-bottom: 0;
  }
  .playButton {
    width: 50px;
    height: 50px;
    cursor: pointer;
    background-color: #000000;
    fill: #aaff00;
    margin: -112px 0 0 108px;
  }
  
  .playButton.playing {
    background-color: #000000;
  }
</style>

<div class="cover">Links</div>

<div class="test hide">









  <div class="links    ">
    <div>
      <a class="x1" href="" target="_blank"></a>
      <a class="x2" href="" target="_blank"></a>
      <a class="x3" href="" target="_blank"></a>
      <a class="x4" href="" target="_blank"></a>
      <a class="x5" href="" target="_blank"></a>
    </div>

    <div>
      <a class="x1" href="" target="_blank"></a>
      <a class="x2" href="" target="_blank"></a>

      <a class="x4" href="" target="_blank"></a>
      <a class="x5" href="" target="_blank"></a>
    </div>

    <div>
      <a class="x1" href="" target="_blank"></a>
      <a class="x2" href="" target="_blank"></a>
      <a class="x3" href="" target="_blank"></a>
      <a class="x4" href="" target="_blank"></a>
      <a class="x5" href="" target="_blank"></a>
    </div>
  </div>
</div>


<div class="playButton hide">

  <svg class="play" style="margin:5px 9px;" width="38" height="40" viewbox="0 0 85 100">
    <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
  </svg>

  <svg class="pause" style="display: none;margin:5px 7px;" width="36" height="40" viewbox="0 0 60 100">
    <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
  </svg>
</div>


<script>
  (function iife() {
    "use strict";

    function hideClickedElement(evt) {
      var target = evt.target;
      target.classList.add("hide");
      document.querySelector(".test").classList.remove("hide");
      document.querySelector(".playButton").classList.remove("hide");
    }
    var cover = document.querySelector(".cover");
    cover.addEventListener("click", hideClickedElement, false);
  }());

</script>

在 代码 1 上，如何启用音频按钮周围的链接？

Answer 1

Here you go. This is a workaround solution for you

我只是按如下方式修复

.playButton.playing {
  ....
  margin: -112px 0 0 108px;
  ....
}

然后你需要控制linksDiv在什么情况下显示。 document.getElementById("myLinkDiv").style.display='none';

或

document.getElementById("myLinkDiv").classList.add("hide");