如何从HTML元素动态传递参数到JQuery点击事件？

Question

如何从HTML元素动态传递参数到JQuery点击事件？

javascriptjqueryhtml

6

首先，我必须提到我是JavaScript和JQuery世界的新手。我不确定是否为我的问题选择了适当的标题，但我会尽力解释我的问题。

情境：我有一系列正在显示名称的项目列表。当其中一个项目被点击时，应该弹出一个弹出窗口并显示该项目的描述。单击后，通过AJAX调用从服务器检索描述。AJAX调用需要提供项目在数据库中的唯一ID。这里出现了我的问题，它有两个部分：

1. 我不知道在HTML中如何包含项目ID以及在哪里包含。请注意，列表仅显示项目名称而不是ID。 2. 假设已解决第1个问题，如何将所点击的项目ID传递给AJAX调用。

这是项目列表的HTML。正如您所见，它说明了我的问题的第1部分（即不知道如何在HTML中包含ID）。

<ul>
    <li class="item">Item1</li> <!-- this item has id=1 in the database -->
    <li class="item">Item2</li> <!-- this item has id=2 in the database -->
    <li class="item">Item3</li> <!-- this item has id=3 in the database -->
</ul>

以下是JQuery点击事件处理程序，它发送AJAX调用（即getJSON）到服务器。请注意，问题的第2部分由 var item_id = ?? 行说明。请注意， popup 是自定义的javascript。

    <script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
            $(".item").click(function() {
                var item_id = ??
                var data = {"item_id":item_id};
                $.getJSON("/item/json", data, function(data) {
                    var name = data[0]["fields"]["name"]
                    var description = data[0]["fields"]["description"]
                    popup.call(this, name, description);
                });
            });
        });
    </script>

附加信息：我使用Django 1.3作为服务器端，使用JQuery 1.5.2作为客户端。
这是一个类似于我所寻找的示例：http://esdi.excelsystems.com/iseries400apps/exmain.pgm?wsname=DIALOG.pgm&wsnumb=214&wsprogtype=P。希望我的问题已经表述清楚了，非常感谢您专家们提供的任何帮助。谢谢。

- tamakisquare

4个回答

5

Javascript（尤其是jQuery）用于客户端脚本编写。因此，您需要在HTML文档中提供数据。您可以使用jQuery的Metadata插件来提供项目ID：

<li class="item" data="{ItemID: 'Your_Item_ID'}">Item1</li>

并通过以下方式检索：

var item_id_structure = $(this).metadata().ItemID;

- Daniel Protopopov

Acolyte - 感谢您的回答。我对您的方法很感兴趣。jQuery Metadata插件的使用有多受欢迎？这种方法与ARTstudio的方法有何不同？您知道我学习jQuery Metadata插件的任何有用资源吗？ - tamakisquare

我无法确定它有多受欢迎，但我肯定会使用它来传递每个元素的附加信息，因为这个插件易于使用且直观。只要没有具有完全相同ID的节点，并且您的要求是仅传递标识符而不是其他内容，ARTStudio的方法就很好。关于这个插件，没有太多需要学习的，但如果有的话，请查看文档。它所做的就是将Javascript数据存储在字符串中，并使用eval()检索它。 - Daniel Protopopov

0

HTML5原生支持数据属性，可以轻松地使用jquery访问

http://api.jquery.com/data/#data-html5

例如，给定以下HTML代码：

<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div> 1

所有下面的jQuery代码都可以正常工作。

$( "div" ).data( "role" ) === "page";
$( "div" ).data( "lastValue" ) === 43;
$( "div" ).data( "hidden" ) === true;
$( "div" ).data( "options" ).name === "John";

- giorgio79

0

如果您的物品名称是唯一的，那么通过Ajax发送物品名称就可以避免使用物品ID。

- Sai Kumar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Arthur Halma · Accepted Answer

http://www.w3schools.com/tags/tag_li.asp

<li>标签支持以下标准属性： id 指定元素的唯一 id。

在这种情况下，请使用：

<ul>
    <li class="item" id="item_1">Item1</li> <!-- this item has id=1 in the database -->
    <li class="item" id="item_2">Item2</li> <!-- this item has id=2 in the database -->
    <li class="item" id="item_3">Item3</li> <!-- this item has id=3 in the database -->
</ul>

并且

<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        $(".item").click(function() {
            var item_id = $(this).attr('id').replace('item_','');
            var data = {"item_id":item_id};
            $.getJSON("/item/json", data, function(data) {
                var name = data[0]["fields"]["name"]
                var description = data[0]["fields"]["description"]
                popup.call(this, name, description);
            });
        });
    });
</script>