javascript - 相同的 html 表单执行不同的操作

Question

我在一个场景中有这些数据行。

<a id="login" href="#"><img src="images/edit_ico.png" alt="Edit" title="Edit"  border="0" id="<?php echo $key['sub_Id'];?>" /></a> &nbsp;&nbsp;
            <a id="login" href="#"><img src="images/del_ico.png" alt="Delete" title="Delete" border="0" id="<?php echo $key['sub_Id'];?>" /></a> &nbsp;&nbsp;
            <a id="login" href="#"><img src="images/suspend_ico.png" alt="Suspend" title="Suspend" border="0" id="<?php echo $key['sub_Id'];?>" /></a>
            </td>

那是记录不同的订阅者和针对他们的编辑、暂停和删除图像。单击我打开 jquery 对话框，管理员在其中为每个操作输入用户名和密码。我必须针对该表单上的每个操作获取订阅者 ID 并执行该特定操作。这是我的表格

<div id="box" align="center">
</div>
<form name="loginform" id="confirm_action" method="post" action="process_form.php?action=<?php echo"1"; ?>" onsubmit="return validateForm()">User Name:
    <input type="text" name="username" id="username" placeholder="User Name..."/>
    <br/>Password:
    <input type="password" name="password" id="password" maxlength="20" placeholder="Password..." />
    <input type="submit" name="Submit" />
    <button type="button" id="cancel"> Cancel</button>

和加载此表单的jquery

$('a#login').click(function(){
$("#box").fadeIn('slow');
$('form').fadeIn('slow');
})

当加载表单时，我如何通过获取图像 ID 字段中的 ID 来执行不同的操作。

Answer 1

首先，不要为不同的链接使用相同的 id，而是使用相同的 CSS 类名。您可以使用 JQuery 数据获取图像或链接中的数据

引用这个 http://api.jquery.com/data/

例如:

<a class="login" data-id="<?php echo $key['sub_Id'];?>" data-action="edit" href="#"><img src="images/edit_ico.png" alt="Edit" title="Edit"  border="0" /></a>

<a class="login" data-id="<?php echo $key['sub_Id'];?>" data-action="delete" href="#"><img src="images/delete_ico.png" alt="Delete" title="Delete"  border="0" /></a>