javascript - 获取点击的列表视图项的自定义数据属性；弹出; jqm

Question

我有一个动态生成的列表视图。我为每个列表元素分配一个自定义数据属性。单击列表项时，它会调用一个弹出窗口。

            <a  href="#popupMenu" data-name='.$myrow[id].'  data-rel="popup">View</a>

//我的弹出窗口

            <ul data-role="listview" data-inset="true"  data-theme="b">
                <li data-role="divider" data-theme="a">Options</li>
                <li><a id="one" onclick="func1();" href="#">Function one</a></li>
                                    <li><a id="two" href="#">Remove</a></li>
                                    <li><a id="three" href="#">Cancel</a></li>
            </ul>

我想知道检索调用弹出窗口的列表视图项的自定义数据属性的正确方法。

//myjavascipt

  var func1 = function() {
        //display the custom data attribute from the listview click here
                 alert();
     };

谢谢。

Answer 1

需要通过点击监听器传递事件

<li><a id="one" onclick="func1(event);" href="#">Function one</a></li>

使用事件抓取你想要的信息

function func1(e){
 var role = e.target.parentNode.parentNode.getAttribute("data-role");
 document.querySelector('#popupMenu').innerHtml = role;
}

这是它的一个工作示例： http ://codepen.io/positlabs/pen/DAtCL

Answer 2

我发布基于 JQuery 的答案只是因为您在问题中包含了 JQuery 标签，因此，我假设您的项目中已经有 JQuery。所以：

您可以简单地使用该.attr()方法。

如果那个“数据”属性在它自己的锚标签上，它应该很容易（假设所有锚标签的onclick都指向“func1（）”：

    //display the custom data attribute from the listview click here
    alert($(this).attr('data-role'));
    alert($(this).attr('data-name'));
    alert($(this).attr('data-rel'));

Answer 3

这可能对您有用：

<a id="one" onclick="func1(this)" href="#">Function one</a>

var func1 = function (target) {
    alert($('a').filter(function () {
        return $(this).attr('href') === '#' + $(target).closest('ul').parent().attr('id');
    }).data('name'));
}