0

我想用参数制作函数。我使用下面的代码，但它不工作。谁能告诉我我做错了什么。

<head>
    <script type="text/javascript" src="jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function hide(fn){
            $(fn).click(function(){
                $('div').hide()
            })
        })
    </script>
    <style>
        div { width:500px; height:500px; background:#FF0000; }
    </style>
</head>
<body>
    <button onclick="hide(this)">click for hide</button>
    <a href="#">click</a>
    <button>click</button>
    <div></div>
</body>
4

3 回答 3

1

一件重要的事情：您应该编写不显眼的 JavaScript，因为它被认为是最佳实践。有了它，您可以保持内容与代码的分离。因此，第一步是删除元素onclick上的处理程序。<button>

我假设你想点击“点击隐藏”按钮来隐藏<div>. 好的，让我们将一些骨架代码放入<script>：

$(document).ready(function() {
    $(<button>).click(function() {
        $(<div>).hide();
    });
});

但是我们需要以某种方式将该click处理程序链接到该按钮，并将该hide函数链接到实际的div. 这是执行此操作的最简单方法：提供您的<button>和<div>一些 ID。比方说...

<button id="hide-button">...</button>
<div id="hide-div">...</div>

现在，我们只需要对我们的骨架代码进行一些修改：

$("#hide-button").click(function() {
    $("#hide-div").hide();
});

这就是这个简单代码的作用。当您的 DOM 加载时，会从文档的 ready 事件中调用一个无名函数（您不能为动态定义的函数命名*）。这个无名函数将click处理程序附加到您的#hide-button按钮，因此当您单击该按钮时，会调用另一个匿名函数。该函数调用hide，它执行了一些适用于所有浏览器的 jQuery 魔术，在该#hide-divdiv 上隐藏它。

*好吧，你可以，但前提是你先定义它们然后传递它们。像这样：

var fn = function() {...};
$(document).ready(fn);

编辑

由于提问者不想使用 ID 或类，这里有一个替代解决方案：

<script>
    function hide() {
        $('div').hide();
    }
</script>
...
<button onclick="hide()">click for hide</button>
<div></div>

注意不要放在function hide()jQuery 的 document-ready idiom 中。hide()这样做会因为范围界定而拒绝您访问。

于 2012-07-07T05:32:03.147 回答
0

您的代码当前仅在您单击按钮时设置单击处理程序。

如果您想继续在元素上使用onclick处理程序，则将您的功能更改为简单（不包括该部分）。如果您更愿意使用该函数来设置处理程序，则从元素中删除该属性，并在顶部的函数中更改为，在为您的按钮提供 id 之后。buttonhide$('div').hide()$(fn).clickclickonclickbutton$(fn).click$('#button').clickbutton

于 2012-07-07T05:19:12.627 回答
0

您将紧凑的 jQueryready()函数与其他东西混淆了，所以我会改用可读的$(document).ready()语法：

$(document).ready(function() {
    $('.hide').on('click', function(){
        $(this).next('div').hide()
    })
})

并稍微更改您的 HTML：

<button class="hide">click for hide</button>

不是将函数绑定到元素，而是将事件处理程序绑定到具有hide. 单击它们时，搜索最近的<div>元素并将其隐藏。

于 2012-07-07T05:27:36.877 回答