Question

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

场景：我有一个显示其名称的项目列表。单击其中一个项目时，应显示一个弹出窗口并显示该项目的说明。在点击时通过AJAX调用从服务器检索描述。 AJAX调用需要提供项目（在数据库中）的唯一ID。这是我的问题，它有两个部分：

我不知道在HTML中包含项ID的方式和位置。请注意，该列表仅显示项目名称而不是id。
假设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>

下面是将AJAX调用（即getJSON）发送到服务器的JQuery单击事件处理程序。请注意，问题的第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

Answer 1

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

＆lt; li> tag支持以下标准属性： 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>

Answer 2

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

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

并通过以下方式检索：

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

Answer 3

如果你的项目名称是唯一的，那么通过Ajax发送项目名称。这样你可以避免使用项目ID。

Answer 4

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

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

4 个答案: