javascript - 除非在 jsfiddle 中分开，否则用于关闭父元素的 jQuery 脚本不起作用-6ren

javascript - 除非在 jsfiddle 中分开，否则用于关闭父元素的 jQuery 脚本不起作用

转载作者：行者123 更新时间：2023-11-30 07:31:20

25

4

我的网站上有一个横幅，观众应该可以通过按钮将其关闭。

我已经使用我在 stackoverflow 上找到的脚本解决了这个问题(谢谢!)，并根据我的需要对其进行了定制。

问题是脚本只有在 JSfiddle 中分离到 Javascript+jQuery 左下角的框中时才有效。一旦我把它放在页眉或正文中，它就不再起作用了。

这一定是我遗漏的一些简单问题，比如语法问题，但我无法弄清楚，因为我对 CSS/HTML 以外的任何东西都不熟悉。

有人可以帮我吗？

JSFiddle 不工作，但我需要它:https://jsfiddle.net/AlphaX/ud40gwy3/26/
JSFiddle 仅在 JSFiddle 中工作:https://jsfiddle.net/AlphaX/ud40gwy3/27/

非常感谢!!

阿尔法

.banner {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100px;
  opacity: 0.6;
  color: #ffffff;
  text-align: center;
  font-family: 'Varela Round', sans-serif;
  font-size: 13px;
  padding-top: 5px;
}

.close {
  color: #fff;
  filter: alpha(opacity=20);
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  opacity: .8;
}

.close:hover,
.close:focus {
  color: #fff;
  cursor: pointer;
  filter: alpha(opacity=50);
  opacity: 1;
  text-decoration: none;
}

button.close {
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
}

<html>

<head>

</head>

<body>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    $('.close').on("click", function() {
      $(this).parents('div').fadeOut();
    });
  </script>

  <div class="banner well notice bg-green">


    Close this banner <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
  </div>
</body>

</html>

最佳答案

你应该用匿名 jquery 函数包装你的 js 代码，无论你把代码放在哪里，都要在页面竞争加载后加载，如下所示:

<script>
$(function() {
    $('.close').on("click", function() {
        $(this).parents('div').fadeOut();
    });
});
</script>

关于javascript - 除非在 jsfiddle 中分开，否则用于关闭父元素的 jQuery 脚本不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51847038/

25

4

0

文章推荐： java - 使用 PixelReader/PixelWriter JavaFX 获取图像的一部分

文章推荐： Java:使用传递接口(interface)参数的方法实现接口(interface)

文章推荐： javascript - 为 JavaScript 中的每个列表项遍历数组

实例分析Try {} Catch{} 作用
今天有小伙伴给我留言问到，try{...}catch(){...}是什么意思？它用来干什么？简单的说他们是用来捕获异常的下面我们通过一个例子来详细讲解下
html - 列表社交媒体链接的 ARIA 作用
我正在努力提高网站的可访问性，但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接，因
java.util.Timer SystemTime 作用？
说现在是 6 点，我有一个 Timer 并在 10 点安排了一个 TimerTask。之后，System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
php - 什么是 Doctrine hydration 作用？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
python入门:argparse浅析 nargs='+'作用
我就废话不多说了，大家还是直接看代码吧~ ? 1
Maven是什么?Maven的概念+作用+仓库的介绍+常用命令的详解
Maven系列1 1.什么是Maven？ Maven是一个项目管理工具，它包含了一个对象模型。一组标准集合，一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。核心功能 Mav

首页

博学

6Ren·AI

商城

javascript - 除非在 jsfiddle 中分开，否则用于关闭父元素的 jQuery 脚本不起作用