0

我检索了一个 JSON 对象，其中包含键“options”和“message”，而每个选项值在文档中都有一个相应的 li 元素，例如 [{"opt" : "12", "msg" : "red"} ] 存在一个带有 class="12" 的列表元素。

现在我想做以下事情，当用户点击列表元素中的链接时，应该显示相应的“msg”键的值。

我已经让它工作到 JSON 对象的第一个元素的消息值在单击时显示，但它始终显示 JSON 中第一个元素的消息值，无论单击哪个链接。我认为与 .attr() 有关，但我不确定。

我究竟做错了什么？

这是我的代码和小提琴：

http://jsfiddle.net/F7PuA/1/

HTML

 <ul id="list">
    <li class="12"> <a href="#12">Option 1</a>
    </li>
    <li class="37"> <a href="#37">Option 2</a>
</li>
</ul>
<div class="message" style="display:none;"></div>

JS

$("#list li a").click(function () {

   var liclass = $("#list li").attr("class");

   var json = [{
       "opt": "12",
           "msg": "Red"
   }, {
       "opt": "37",
           "msg": "Green"
   }];

   $.each(json, function (key, value) {
       if (json[key].opt == liclass) {
           $(".message").empty().append(json[key].msg).fadeIn();
       }
   });
});
4

3 回答 3

2

您需要找到与li被点击a元素相关的 ，在这种情况下，您需要找到被点击元素的父li级a。

您可以使用.closest()来做到这一点

var liclass = $(this).closest('li').attr("class");

演示：小提琴

于 2013-08-05T17:44:08.197 回答
1

您的liclass初始化始终在下的元素列表上运行，而不是单击 的特定元素。正在返回它找到的第一个。li#listliattrclass

尝试：

var liclass = $(this).closest('li').attr("class");
于 2013-08-05T17:45:08.230 回答
0

您需要将liClass指向更改为单击的超链接。

var liclass = $(this).parent().attr("class");

更新了 jsFiddle 示例。

编辑：也许您可以直接从hrefattr 中获取数字：

var liclass = $(this).attr('href').substring(1);

第二个jsFiddle示例

于 2013-08-05T17:46:16.860 回答