javascript - 使用按钮 ID 的单击事件

Question

我正在冒险学习一些 javascript 和 jquery，在我的项目中，我有一个带有 id 内联的按钮元素。当您单击该按钮时，它应该会淡入另一个 div 中。我错过了一些东西，但由于我是这种语言的新手，我不确定我认为脚本函数是正确的。

<span data-toggle="tooltip" data-placement="top" title="Open Radar Controls">
   <button id="play" class="map__control_icon"><i class="fa fa-play"></i></button>
</span>

认为由于上面的 ID 与按钮元素内联，可能会导致一些冲突。所以我尝试了下面的内容并将其包装在 div 中。如果上面的方法可行的话，我更喜欢它，因为它更干净且代码更少。

<div id="play">
   <span data-toggle="tooltip" data-placement="top" title="Open Radar Controls">
      <button class="map__control_icon"><i class="fa fa-play"></i></button>
   </span>
</div>

这是我正在调用的脚本。我确实将其放在外部 js 文件中，但是我使用按钮调用文档内的文件。不确定这是否重要。我尝试了标题和正文末尾的代码，上面和下面的 HTML 方法似乎都有效。我错过了什么并且做得不对？

$(document).ready(function() {
  $("#play").click(function() {
    $("#radar-control-container").fadeIn(1000);
  });
});

还可能提到我现在在控制台以太网中遇到错误。

编辑

我将mapAds div添加到脚本中，当您按下按钮时，它会像预期的那样淡出，但雷达控制容器div不会淡出它。所以至少我知道这与按钮无关。我认为这与它被隐藏在准备好的文档中有关，我需要事件来更改它以先显示然后淡入？

$(document).ready(function() {
  $("#play").click(function() {
    $("#radar-control-container").delay(2000).fadeIn(1000);
    $("#mapAds").fadeOut(1000);
  });
});

Answer 1

我按照以下内容进行了整理，它按设计工作。

添加此内容是为了从隐藏状态显示它...

.css('visibility', 'visible').

然后是完整的脚本。

$(document).ready(function() {
  $("#play").click(function() {
    $("#radar-control-container").css('visibility', 'visible').delay(2000).fadeIn(1000);
    $("#mapAds").fadeOut(1000);
  });
});

希望这是正确的，感谢@charlietfl 为我指明了正确的方向。