javascript - 使用 Javascript 在动态生成的链接中传递数据

Question

问题:这是我如何使用 js 传递数据。这是一个好方法还是我做错了？它确实有效，但似乎……我想，对于我相对菜鸟的 JS 技能来说，这似乎很可疑。

我有一个自定义网格插件，可以生成数据网格。假设它生成用户名行及其 id #、 Angular 色、一些日期等。

我希望能够单击每行中的“编辑”链接，弹出一个模式窗口来管理数据。也许更改用户的 Angular 色。

网格是由包装在匿名函数中的代码生成的，模态是由包装在不同匿名函数中的代码生成的。我需要使用该特定单击行的正确数据填充模式。

我所做的是将必要的数据作为自定义属性包含在单击以管理该用户数据的链接中。生成的链接如下所示:

<a href="#" userrole="role1" userid="12345"> Manage </a>

因此，单击该链接将启动模式窗口，然后我使用一些 jquery 来获取属性值并填充模式。一个例子:

首先，处理点击的代码(假设点击处理程序和其他 document.ready() 内容已分配...为了简洁起见，我将其省略，但这是基于正确工作的代码):

(function(){
    var EditUserClick = function(e) {
        userRole = $(this).attr('userrole'); //assign some values
        userId = $(this).attr('userid'); // assign some values

        OpenEditUserModal(userRole,userId); 
    }
});

二、处理模态的代码:

//Public stuff so it's accessible to the click.
var OpenEditUserModal;

(function(){
    OpenEditUserModal = function(userRole,userId){
        //code to handle the modal window opening can go here
        //populate the modal
        $('#userRole').text(userRole); // let's say this is a text field
        $('#userId').val(userId); //let's say this is a hidden form field
    }
});

那怎么样呢？有没有更好的方法来传递这些数据，而不是将其分配给虚构的链接属性并将其传递给下一个方法？欢迎任何其他建议...始终寻求学习。

Answer 1

如果您不关心 HTML 文档是否通过验证检查并且代码按原样工作，请保持这种状态。

作为一种侵入性较小、更符合标准的方法，您可以将所有内容放入 href 属性中，并简单地解析点击时的键值对( see this question 有关如何执行操作的提示它)。

<ul>
<li><a href="index.html?foo=bar&id=1">first</a>/li>
<li><a href="?foo=woo&id=2">second</a></li>
</ul>

简单的 JS:

$('a').click(function(){
    var querystring = $(this).attr('search');
    //console.log(querystring);

    // parse here and call OpenEditUserModal       
    return false;
});