Question

我正在使用jQuery创建一个小型无线电播放器。您可以在codepen上找到代码。当我在Firefox上运行代码时，我遇到了代码问题（它适用于所有其他浏览器）。以下是JS的一部分：

   $(".back").click(function(){
     $("h2").show();
     $("hr").show();
     $(".guziki").hide();
     $("#backbutton").hide();
});

不起作用。我从来没有遇到过这个问题。可能导致这种情况的原因是什么？

＆＃13;

$(document).ready(
  function() {
    $(".middle").click(function() {
      $(this).children(".guziki").show();
      $("h2").hide();
      $("hr").hide();
      $("#backbutton").show();
    });
    $(".back").click(function() {
      $("h2").show();
      $("hr").show();
      $(".guziki").hide();
      $("#backbutton").hide();
      console.log($(".back").parent())
    });
  });
var buttons = $("#one, #two").on("click", function() {
  buttons.toggle();
});

＆＃13;

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Bungee+Hairline" rel="stylesheet"> #radio {
  background-color: #e0e0e0;
  max-width: 25%;
  overflow: hidden;
  font-family: helvetica;
}
h2 {
  color: #212121;
  text-align: center;
  font-family: 'Bungee Hairline'
}
h1 {
  color: #e0e0e0;
  text-align: center;
  text-transform: uppercase;
  padding-top: 2%;
  font-family: 'Bungee Hairline', cursive;
  font-size: 2em;
}
.top {
  background-color: #212121;
  height: 50px;
  margin-top: -5%;
}
.bottom {
  text-align: center;
  background-color: #212121;
  color: #e0e0e0;
  padding: 5px 0;
}
button {
  border: none;
  background: transparent;
  display: block;
  margin: 0 auto;
  font-size: 40px;
}
.guziki {
  text-align: center;
  display: none;
}
#two {
  display: none;
}
.fa-chevron-left {
  position: absolute;
  left: 20px;
  font-size: 30px;
  padding-top: 10px;
  cursor: pointer;
}
#backbutton {
  display: none;
  padding-top: 30px;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<audio id="player" src="http://uk3.internet-radio.com:11128/;"></audio>
<audio id="player2" src="http://stream.techno.fm/live.mp3"></audio>

<div id="radio">
  <div class="top">
    <h1>radio techno</h1>
    <div id="backbutton">
      <button class="back"><i class="fa fa-chevron-left" aria-hidden="true"></i>
      </button>
    </div>
  </div>
  <div class="middle kinetic">
    <h2 id="kinetic">Kinetic</h2>
    <div class="guziki" id="guzikione">
      <button onclick="document.getElementById('player').volume += 0.1">+</button>
      </button>
      <button class="playStop" id="one" onclick="document.getElementById('player').play()"><i class="fa fa-play" aria-hidden="true"></i>
      </button>
      <button class="playStop" id="two" onclick="document.getElementById('player').pause()"><i class="fa fa-pause" aria-hidden="true"></i>
      </button>
      <button onclick="document.getElementById('player').volume -= 0.1">-</button>
    </div>
  </div>
  <hr>
  <div class="middle technofm">
    <h2 id="technofm">techno.fm</h2>
    <div class="guziki">
      <button onclick="document.getElementById('player2').volume += 0.1">+</button>
      </button>
      <button class="back"><i class="fa fa-chevron-left" aria-hidden="true"></i>
      </button>
      <button class="playStop" id="one" onclick="document.getElementById('player2').play()"><i class="fa fa-play" aria-hidden="true"></i>
      </button>
      <button class="playStop" id="two" onclick="document.getElementById('player2').pause()"><i class="fa fa-pause" aria-hidden="true"></i>
      </button>
      <button onclick="document.getElementById('player2').volume -= 0.1">-</button>
    </div>
  </div>
  <hr>
  <div class="middle">
    <h2>uzic</h2>
  </div>
  <hr>
  <div class="middle">
    <h2>ballads fm 87,1</h2> 
  </div>
  <hr>
  <div class="middle">
    <h2>maximum fm 142,2</h2> 
  </div>
  <div class=bottom>
    <h4>currently playing</h4>
  </div>
</div>

＆＃13;

编辑：我认为它可能是一个codepen / firefox错误，但即使我从我的计算机上运行它，它仍然不能在Firefox中运行。

Answer 1

问题不在于jQuery。按钮太小，以至于您没有点击它。

Demo

#backbutton button {
  position: absolute;
  left: 300px;
  min-width: 50px;
  min-height: 50px;
  background: pink;
}

Answer 2

这是因为你的雪佛龙被重新定位在Firefox预期按钮的范围之外。如果您将V形按钮保持在按钮内并定位按钮，那么它就能正常工作。

.fa-chevron-left {
  font-size: 30px;
  padding-top: 10px;
  cursor: pointer;
 }

#backbutton {
    display: none;
    padding-top: 30px;
    position:relative;
 }
.back {
    position: absolute;
    left: 20px;
 }

http://codepen.io/anon/pen/GjokQp

使用jQuery 3.1.0版在Firefox中显示和隐藏不起作用

2 个答案: