Question

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

<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>

Answer 1

重要的一点是：你应该写unobtrusive 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-div div上隐藏它。

*嗯，你可以，但只有先定义它们然后传递它们。像这样：

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的文档准备习惯用法中。这样做会因为范围界定而拒绝您访问hide()。

Answer 2

当您单击按钮时，您的代码目前只执行设置点击处理程序。

如果您想继续使用onclick元素上的button处理程序，请将hide函数更改为$('div').hide()（不使用$(fn).click部分）。如果您更愿意使用click函数来设置处理程序，请从onclick元素中移除button属性，并在顶部的函数中将$(fn).click更改为在为您的按钮提供$('#button').click的ID后，button。

Answer 3

您将紧凑的jQuery ready()函数与其他内容混淆，因此我会使用可读的$(document).ready()语法：

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

稍微更改一下HTML：

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

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

jquery中的参数函数

3 个答案: