Question

  <script>
  $("a").click(function () {
  $("#wrapper").fadeOut("slow");
  });
  </script>


 <div id="wrapper" >
  <a href="1.html"> <img src="images/landing.png"/></a>
  </div>

我已经检查了jquery文档，但它没有解决问题，试图替换不同的选择器

Answer 1

您正在加载DOM之前执行脚本。在定义$("a")标记之前，jQuery调用<a>会立即执行，因此click不会绑定任何内容。要修复使用在<a>可用后执行的就绪功能。

$(document).ready(function() {
  $("a").click(function () {
    $("#wrapper").fadeOut("slow");
  });
});

JSFiddle示例 - http://jsfiddle.net/Vkd8J/

Answer 2

您需要阻止默认事件行为。

$(document).ready(function() {
    $("a").click(function(e) {
        e.preventDefault();
        $("#wrapper").fadeOut("slow");
    });
});

请参阅 jsFiddle Example 。

此外，您必须通过

包装整个代码来确保DOM已准备就绪

$(document).ready(function() { ... }

为什么？由于您的<script>标记位于整个文档之前（完全可以接受），当您的脚本运行时，您尝试使用的元素尚不存在（因为它们尚未被浏览器下载）。因此，您要等到DOM准备就绪，然后执行代码。

Answer 3

（与document.ready合并，由其他人提及）

您需要使用e.preventDefault();来阻止链接转到href：

$("a").click(function(e) {
    $("#wrapper").fadeOut("slow");
    e.preventDefault();
});

http://jsfiddle.net/vAN3z/

Answer 4

一切都是正确的，但你错过了将所有内容包装在$（document）.ready（）中，如下所示：

<script>
$(document).ready(function(){
    $("a").click(function () {
        $("#wrapper").fadeOut("slow");
    });
})
</script>

链接点击时简单淡出图像

4 个答案: