Question

我有一个html页面，上面有几个超链接，它们共享相同的id但是有一个不同的自定义属性linkID。我知道这不是一个好习惯，但这不是我现在可以改变的。每当点击一个链接时，我需要打开一个模态对话框。为此我使用JQuery。现在我需要将linkID属性传递给Jquery函数。我尝试使用$（＆＃34;＃hlk1＆＃34;）。attr（＆＃34; LinkID＆＃34;）和$（this）.attr（＆＃34; LinkID＆＃34;）但都没有用。它出现在＆＃34; undefined＆＃34;。

<html>
<head>
<script src="Script\jquery-2.2.0.js"></script>
<script src="Script\jquery-ui-1.8.24.js"></script>
<script>
$( document ).ready(function() {
    $("#hlk1").click(function(){ 
        var linkId=$("#hlk1").attr("LinkID");
        // initialize dialog
        var dlg = $("#dialog").dialog({ 
            autoOpen: false, height: 500, width: 350
        });

        // load content and open dialog
        dlg.load('page2.html?id=' + linkId).dialog('open');
    });
});

 </script>

</head>
<body>
<a href="#" id="hlk1" linkID="305">Click here</a>
<a href="#" id="hlk1" linkID="890">Click here</a>
<div id="dialog">

</div>
</body>
</html>

Answer 1

您需要使用linkID而不是LinkID：

var linkId= $("#hlk1").attr("linkID");

您还应该利用data属性。

作为附加说明，您可能在使用jQuery选择具有相同标识符的多个元素时遇到问题，因此使用类并附加处理程序可能更好。

<强> HTML：

<a href="#" class="hlk1" linkID="305">Click here</a>
<a href="#" class="hlk1" linkID="890">Click here</a>

<强> jQuery的：

$(".hlk1").on("click", function() {
   var linkId = $(this).attr("linkID");
});

Answer 2

您无法在页面中重复ID，因此请改用class。然后在点击处理程序this内部是

上发生事件的元素

<a href="#" class="hlk1" linkID="305">Click here</a>
<a href="#" class="hlk1" linkID="890">Click here</a>

JS

 $(".hlk1").click(function(){ 
        var linkId=$(this).attr("linkID");
        // initialize dialog
        var dlg = $("#dialog").dialog({ 
            autoOpen: false, height: 500, width: 350
        });

        // load content and open dialog
        dlg.load('page2.html?id=' + linkId).dialog('open');
    });

Answer 3

您需要.data()方法。也正确使用数据属性（data-linkId = "305"）

$( document ).ready(function() {
    $("#hlk1").click(function(){ 
        var linkId=$(this).data("LinkID");
        // initialize dialog
        var dlg = $("#dialog").dialog({ 
            autoOpen: false, height: 500, width: 350
        });

        // load content and open dialog
        dlg.load('page2.html?id=' + linkId).dialog('open');
    });
});

将元素属性传递给JQuery事件

3 个答案: