Question

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

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

请建议我该怎么做？

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

用于打印HTML的cakephp代码

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

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

打开对话框，单击类似名称的多个按钮

1 个答案: