Javascript 单击时在每个列表项上弹出，具有编写更少代码的功能

我正在尝试建立一个用户列表，当我点击任何项目时，我想要一个弹出窗口

具有删除或取消的选项

这是迄今为止我为每一项所得到的

echo "<li><a href=#popupid7' data-rel='popup'><img src='user.png' class='ui-li-icon'>
                <p><strong>PEREZ, CARLOS </strong></p>
                <p class='ui-li-aside'><strong>$y - 01/10/2014</strong>PM</p>
       </a></li>";

echo“
”；

加上弹出代码：

<div data-role='popup' id='popupid7' data-theme='a' class='ui-corner-all'> 
    <form> 
        <div style='padding:10px 20px;'> 
            <h3>Please sign in</h3> 
            <label for='un' class='ui-hidden-accessible'>Username:</label> 
            <input type='text' name='user' id='un' value='' placeholder='username' data-theme='a'> 
            <label for='pw' class='ui-hidden-accessible'>Password:</label> 
            <input type='password' name='pass' id='pw' value='' placeholder='password' data-theme='a'> 
            <button type='submit' class='ui-btn ui-corner-all ui-shadow ui-btn-b ui-btn-icon-left ui-icon-check'>Sign in</button> 
        </div> 
    </form> 
</div>

请登录
用户名：
密码：
登录

我想用一个函数使它更短， 这就是我需要你的指导/帮助的地方

因为我尝试通过JS来实现，但我不确定这是否好：

<script>
$(document).ready(function(){
    $("#listusers li").click(function(){
        var popid=$(this).attr("id");
        displayPopupid(popid)
    });
});

Function displayPopupid(numberid){
    document.getElementById("emptydiv").innerHTML=" \
<a href='# " + numberid + "' data-rel='popup' data-position-to='window' class='ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-check ui-btn-icon-left ui-btn-a' data-transition='pop'>Sign in</a> \
<div data-role='popup' id='adC' data-theme='a' class='ui-corner-all'> \
    <form> \
        <div style='padding:10px 20px;'> \
            <h3>Please sign in</h3> \
            <label for='un' class='ui-hidden-accessible'>Username:</label> \
            <input type='text' name='user' id='un' value='' placeholder='username' data-theme='a'> \
            <label for='pw' class='ui-hidden-accessible'>Password:</label> \
            <input type='password' name='pass' id='pw' value='' placeholder='password' data-theme='a'> \
            <button type='submit' class='ui-btn ui-corner-all ui-shadow ui-btn-b ui-btn-icon-left ui-icon-check'>Sign in</button> \
        </div> \
    </form> \
</div>";
}
</script>

$（文档）.ready（函数（）{
$（“#listusers li”）。单击（函数（）{
var popid=$（this.attr（“id”）；
显示POPUPID（popid）
});
});
函数displayPopupid（numberid）{
document.getElementById（“emptydiv”）.innerHTML=”\
\
\
\
\
请登录\
用户名：\
\
密码：\
\
登录\
\
\
";
}

所以。。我想知道最好的方法， JS、JQ或AJAX

我必须提到，当我单击DeleteUser按钮时，它应该是php中的一个表单来删除它，并知道我单击的用户的id

---

提前非常感谢您

您应该使用一个常见的弹出div。下面是您可以实现的方法

将userId作为参数添加onclick处理程序，以标识每个项目的用户

  <li>
      <a onclick="openPopUp(userId)" data-rel='popup'> whatever.. </a>
  </li>

---

我忘了：我试图添加单击它的功能，但是，如果我在一个DIV中使用document.getElementById（“emptydiv”）.innerHTML=“popupcode”是的，听起来不错。问题是在常见的弹出代码中，如何获取用户ID，这样我就可以发布它了。我可以在函数中获取它，但在公共弹出窗口中无法获取它，可以吗？没关系，只是发现#userId是隐藏的。。。这可能是个好主意，有没有其他方法不使用隐藏的输入字段来传递userId值？您可以声明全局变量并在openPopup处理程序中将其设置为userId。

<div data-role='popup' id='myPopupDiv' data-theme='a' class='ui-corner-all'> 
        <input type="hidden" id="userId"/>....other fields pwd/name etc

function openPopUp(userId){
  $("#userId").val(userId);
  $("#myPopupDiv").popup("open");
}