单击多个名称相似的按钮时打开对话框答案

【问题标题】：Open dialog box on click on multiple buttons of similar name单击多个名称相似的按钮时打开对话框
【发布时间】：2013-06-12 11:08:37
【问题描述】：

我必须 jquery 来显示对话框，但有一个问题，我有多个名称相似的按钮，例如：btnEditUser-1、btnEditUser-2、btnEditUser-3

我必须为每个按钮调用相同的函数才能调用 AJAX 函数。

请建议我该怎么做？

请查找html/javascript代码以供参考：

cakephp 代码打印 html

if($user['id']=="1" or ((strtotime(date("Y-m-d"))-strtotime($searchres[$i]['documents']['uploadtime']))<172800))
    {

    echo $this->Form->button('Edit User', array('type'=>'button','id'=>'edituser-'.$id,'name'=>'edituser-'.$id,'value'=>$id));
}

我必须在 jquery 中编写以下函数来接收按钮发送的值（如上所述）：

function showedituser(doc_id) {
        var data = {doc_id : doc_id};
        var divname = $('#dialog-edituser');
        $("#dialog-markup").dialog("open");
        var url = 'documents/getassigned_users';
        callajax(url, data, divname);
        return false;
   }

【问题讨论】：

那为什么不使用类呢？
感谢烤的评论。但是我是 jquery 的新手，请建议我如何在这种情况下使用类。
您是否尝试理解/学习您正在使用的代码？如果是，你应该不会有使用类的困难。现在，让我们知道您遇到的困难，也许有人可以帮助您。如果你不努力，没有人会帮助你

标签： jquery html cakephp-1.3

【解决方案1】：

为所有这些按钮添加一个通用类。例如：

<input type="button" id="btnEditUser-1" class="btnEditUser" >
<input type="button" id="btnEditUser-2" class="btnEditUser" >
.......................
<input type="button" id="btnEditUser-n" class="btnEditUser" >

然后为所有这些添加一个点击处理程序（例如使用 jQuery）：

$('.btnEditUser').on('click', function(event){
    //If you're in a form you may want to prevent the default behaviour (sumbit the form)
    event.preventDefault();
    //Now most-probably you'd like to do something different for each button clicked:
    var buttonIdParts = $( this ).attr('id').split('-');
    //Now you're left with the number from the id
    var buttonId = buttonIdParts[1];
    switch(buttonId)
    {
    case 1:
       // execute code block 1
       //AJAX Call, whatever
        break;
    case 2:
      //  execute code block 2
        break;
    default:
    //code to be executed if n is different from case 1 and 2
    }
});

您也可以使用data attribute，而不是解析id：

<input type="button" id="btnEditUser-1" class="btnEditUser" data-button-id="1">
<input type="button" id="btnEditUser-2" class="btnEditUser" data-button-id="2">
...............
<input type="button" id="btnEditUser-n" class="btnEditUser" data-button-id="n">

直接获取正确的id：

//This goes inside the events handler
var buttonId = $( this ).attr('data-button-id');

还需要注意，在事件处理程序回调函数中，this 的上下文是刚刚被点击的按钮，$( this ) 是 jQuery 选择这个按钮（来自 DOM）并从中创建一个jQuery Object。

【讨论】：