1

因此，我试图更好地了解 JQuery 及其在 Web 内容和 Web 应用程序中的用途，所以请听我说完。此测试页面的目标是能够使用按钮来更改、创建和删除内容。另一个目标是测试使用“enter”键单击文本框中的一个按钮的功能（模拟用户使用 enter 键单击提交按钮）。这是我开发的代码，我对如何修复“destroyContent”未定义的错误有点困惑。显然我的语法是关闭的，但我不知道如何修复它。任何人都可以帮助并可能指出我一些有用的参考资料吗？

jQuery：

$(document).ready(function () {
    $('#Scan').keypress(keyHandler);
});
$.keyHandler = function (e) {
    if (e.which == 13) {
        $(this).blur();
        $('#destroy').focus().click()
    }
}
$.changeHeading1 = function () {
    x = document.getElementById("Heading1")
    x.innerHTML = "It has changed";
}
$.createContent = function () {
    var para = document.createElement("p");
    var node = document.createTextNode("This is new");
    para.appendChild(node);

    var element = document.getElementById("div1");
    element.appendChild(para);
}
$.destroyContent = function () {
    var child = document.getElementById("p1");
    child.parentNode.removeChild(child);
}

（我保证它在我的实际代码中看起来好多了，我只是很难在这里格式化）

对于 HTML：

<h1 id="Heading1" />
<p id="p1" />
<button type="text" id="Scan" />
<button type="button" onclick="changeHeading1()" />
<button type="button" onclick="createContent()" />
<button type="button" id="destroy" onclick="destroyContent()" />
4

2 回答 2

2

您正在destroyContent以成员的身份创建$但不以这种方式调用它：

$.destroyContent = function () {相对onclick="destroyContent()"

您应该在destroyContent外部定义$或使用$. 其中之一：

function destroyContent() {
    var child = document.getElementById("p1");
    child.parentNode.removeChild(child);
}

或者

<button type="button" id="destroy" onclick="$.destroyContent()">

于 2013-05-01T19:01:20.280 回答
2

可能有帮助的第一件事就是$全局命名空间上的一个变量——在这种情况下是window. 如果您转到 chrome 控制台，您将通过键入window.$. 它没有什么特别之处。也有window.jQuery与 相同的window.$。

因此，当您访问一个函数时，它会尝试获取当前范围内的变量。所以当你这样做时：

<button type="button" id="destroy" onclick="destroyContent()" />

这和做的一样window.destroyContent()。如果您想访问您的版本，它是 $ 变量的属性。所以你可以改变它：

onclick="$.destroyContent()"
onclick="window.$.destroyContent()"

但是由于您想更好地理解 jQuery，我会避免向标记添加处理程序（正如大多数人会建议的那样）。而是通过 jQuery 创建处理程序，例如：

$('#destroy').click(function() {
  var child = document.getElementById("p1");
  child.parentNode.removeChild(child);
});

阅读 jQuery 事件 API 将有助于更好地理解如何做到这一点。他们有很好的例子:)

于 2013-05-01T19:09:55.513 回答