Question

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

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

// mypopup

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

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

// 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()方法。

如果那个“data”属性在自己的锚标签上，那应该很容易（假设所有锚标签的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'));
}

获取点击的listview项的自定义数据属性;弹出; JQM

3 个答案: