Question

我有一个表单，其中有五个按钮和几个包含不同值的复选框。

<form action="" method="post" id="create-user">
    <button type="button" name="new-user">New</button>
    <button type="button" name="activate-user">Activate</button>
    <button type="button" name="block-user">Block</button>
    <button type="button" name="unblock-user">Unblock</button>
    <button type="button" name="delete-user">Delete</button>
    <input type="checkbox" value="1>" name="userId[]" />
    <input type="checkbox" value="2>" name="userId[]" />
    <input type="checkbox" value="3>" name="userId[]" />
    <input type="checkbox" value="4>" name="userId[]" />
    <input type="checkbox" value="5>" name="userId[]" />
</form>

现在基于像onclick这样的JavaScript事件，我想对不同的按钮执行不同的操作，例如。

a）<button type="button" name="new-user">New</button>

当用户点击此按钮时，它应该重定向到以下网址。'index.php?users&option=create'。

b）<button type="button" name="activate-user">Activate</button>

此按钮用于Ajax，它应该获取数组中选定的复选框值，即userId[]，并在收到响应后将数据发送到manage-users.php并更新表单。其余三个按钮Block，Unblock和Delete遵循与此相同的步骤。

所有这一切都应该使用JQuery来完成，因为我仍然是JS / JQuery的新手，如果有人可以指导我创建JQuery函数，我会说。

感谢。

Answer 1

最简单的方法是在按钮中添加id属性，以便您可以使用jQuery轻松定位它们。

例如：

<form action="" method="post" id="create-user">
    <button type="button" name="new-user" id="new-user">New</button>
    <button type="button" name="activate-user" id="activate-user">Activate</button>
    <button type="button" name="block-user" id="block-user">Block</button>
    <button type="button" name="unblock-user" id="unblock-user">Unblock</button>
    <button type="button" name="delete-user" id="delete-user">Delete</button>
    <input type="checkbox" value="1>" name="userId[]" />
    <input type="checkbox" value="2>" name="userId[]" />
    <input type="checkbox" value="3>" name="userId[]" />
    <input type="checkbox" value="4>" name="userId[]" />
    <input type="checkbox" value="5>" name="userId[]" />
</form>

然后使用jQuery为按钮上的click事件附加处理程序，如下所示：

<script type="text/javascript">
    $().ready(function(){
        $('#new-user').click(function() {
            // do your code here
        });
        $('#activate-user').click(function() {
            // do your code here
        });
        $('#block-user').click(function() {
            // do your code here
        });
        $('#unblock-user').click(function() {
            // do your code here
        });
        $('#delete-user').click(function() {
            // do your code here
        });
    });
</script>

这并不是说您必须使用id来定位您可以使用当前HTML代码的按钮：

<script type="text/javascript">
    $().ready(function(){
        $('button[name="new-user"]').click(function() {
            // do your code here
        });
        $('button[name="activate-user"]').click(function() {
            // do your code here
        });
        $('button[name="block-user"]').click(function() {
            // do your code here
        });
        $('button[name="unblock-user"]').click(function() {
            // do your code here
        });
        $('button[name="delete-user"]').click(function() {
            // do your code here
        });
    });
</script>

id被认为是更好的做法，浏览器在DOM中的定位速度比在上一个示例中按属性搜索更快。

Answer 2

基本思想是为每个按钮创建一个选择器，并为每个匹配的元素附加一个事件处理程序。实施例

$("button[name='new-user']").click(function() {
   window.location = "index.php?users&option=create";
});

这里发生的是

$("button[name='new-user']")查找名称为 new-user
.click(param)将事件处理程序附加到第一步中找到的每个元素。触发onclick事件时调用事件处理程序
作为click的参数，我们创建了作为事件处理程序执行的新函数
window.location指示浏览器更改当前网址。

如果使用id属性标识每个按钮，则执行速度可能会更快。然后，jQuery选择器$("#new-button")将能够使用document.getElementById来查找相关按钮。

我建议你深入研究jQuery文档，因为它非常好并且提供了所有函数的代码示例。在你尝试做某事后，是时候问你在这里做错了什么。

此外，根据您的目标受众，在不支持javascript（屏幕阅读器，移动设备等）的情况下提供优雅降级通常是个好主意。如果导航完全使用javascript完成，则有一组用户根本无法使用该服务。

Answer 3

您可以使用event.target并根据点击的按钮做出相应的响应：

$('button').click(function(event){
   var name= event.target.name;
   if (name == 'delete-user'){
     //delete the user
   }else if (name == 'new-user'){
     // and so on

});

Answer 4

你需要在每个按钮上放置一个属性（比如id）然后读取id $（this）.attr（“id”）来确定在事件回调期间按下了哪个按钮：

如何为每个按钮创建不同的Jquery功能？

4 个答案: