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方法在标题和主体末尾的代码，nether似乎工作。我错过了什么，做得不对？

$(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指出我正确的方向。

使用按钮ID单击事件

1 个答案: