Question

我创建了一个HTML页面并在其中添加了jQuery，但它无效。不知道我做错了什么。我也搜索了但我的代码看起来正确。但它不适合我。
我的代码：

<!DOCTYPE html>
<html>

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("abc").fadeOut("fast");
            });
        });
    </script>
    <style>
        .abc {
            background-color: #FEA2A2;
            width: 150px;
            height: 150px;
            border-radius: 5px;
        }
    </style>
</head>

<body>
    <button>Click Me!</button>
    <div class='abc'></div>
</body>

</html>

根据代码，单击按钮时应该淡出框。但它没有发生。

Answer 1

为类使用前缀点。你错过了课堂上的点

$(".abc").fadeOut("fast");

Answer 2

更改

<script>
$(document).ready(function(){
$("button").click(function(){
$("abc").fadeOut("fast");
});
});
</script>

到

<script>
$(document).ready(function(){
$("button").click(function(){
$(".abc").fadeOut("fast");
});
});
</script>

正在使用类选择器。

Answer 3

更改此行：

$("abc").fadeOut("fast");

为：

$(".abc").fadeOut("fast");

你有错误的jquery选择器。你需要在课堂上使用dot（.）。

参见 documentation

Answer 4

对于选择器，使用.用于类：

更改

$("abc").fadeOut("fast");

要

$(".abc").fadeOut("fast");

Answer 5

选择器中的错字错误。类选择器的前缀.

$(".abc").fadeOut("fast");

为什么我的jQuery代码不起作用？

5 个答案: