Question

我的文件位于同一个文件夹中。当我在html文件本身或外部script.js文件上运行jQuery命令时，没有任何反应。

但是当我直接在线本身上进行查询时，它就可以了。

我做错了什么？

<!--Nothing happens -->

<script src="jquery.js"></script>
    <script src="script.js"></script>
    <script>
        $( "para1" ).click(function() {
            $("para1").hide();
        });
    </script>

<body>
    <p id="para1">This is a paragraph</p>
</body>


<!-- Works -->

<body>
    <p id="para1" onclick="$(this).hide();">This is a paragraph</p> 
</body>

Answer 1

此

$( "para1" ).click(function() {
    $("para1").hide();
});

应该是

$( "#para1" ).click(function() {
    $("#para1").hide();
});

请注意在选择器中使用#。这意味着您在 ID 之后键入的内容。

Answer 2

您正在尝试访问HTML文档，但尚未创建。您的脚本在创建文档之前执行。

您必须等待创建HTML才能开始向节点分配jquery内容。

你需要这样做：让我们定义一个在创建文档时要调用的函数：

<script>
    function document_created() {
        // your document is created now
        // you can assign your stuff:
        $( "#para1" ).click(function() {
            $("#para1").hide();
        });
    }
</script>

...现在让我们在创建文档时调用它。

您如何知道文件的创建时间？

使用jquery：

$(document).ready(document_created);

使用普通的DOM事件：

<body onload="document_created()">

这称为＆＃34;订阅活动＆＃34;。还有许多其他有趣的事件你也可以订阅：页面卸载，窗口调整大小等....

此外，当您使用JQuery按ID访问元素时，您需要使用＆＃34;＃＆＃34;在名字前面。它可能会以你的方式工作，但不是很正确。所以：

$("#para1") ---> will access element with ID="para1" - ids are unique, so will be only one-
$(".para1") ---> will select elements with class "para1" - can be many-

Answer 3

在jQuery中，您需要使用#作为id-selectors的前缀。另外，在jQuery绑定的click事件中，this的上下文被设置为触发click事件的元素，因此$(this).hide()在你的情况下将在事件处理程序内部工作。

改变这个：

$( "para1" ).click(function() {
    $("para1").hide();
});

为：

$("#para1").click(function() { // add the # prefix
    $(this).hide(); // use this
});

DEMO - 使用以上建议的代码

除非在元素本身上写，否则为什么脚本不起作用？

3 个答案: