获取点击列表视图项的自定义数据属性;弹出;JQM.

Get custom data attribute of clicked listview item; popup; jqm

本文关键字：数据属性 自定义 弹出 JQM 列表 视图 获取      更新时间：2023-09-26

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

            <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();
     };

谢谢。

我发布一个基于 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'));

这可能适合您：

<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'));
}

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

<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

相关文章：