Question

我检索一个包含“options”和“message”键的JSON对象，而每个options值在文档中都有一个对应的li元素，例如[{“opt”：“12”，“msg”：“ red“}]存在一个list =”12“的列表元素。

现在我要执行以下操作，当用户单击列表元素内部的链接时，应显示相应“msg”键的值。

我已经明确了JSON对象的第一个元素的消息值在点击时显示，但无论点击哪个链接，它总是显示JSON中第一个元素的消息值。我认为与.attr（）有关，但我不确定。

我做错了什么？

这是我的代码和小提琴：

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

Answer 1

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

您可以使用.closest()来执行此操作

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

演示：Fiddle

Answer 2

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

尝试：

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

Answer 3

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

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

Updated jsFiddle example.

编辑：也许您可以从href attr获取数字：

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

2nd jsFiddle example

jQuery print JSON元素，其键值等于li类的名称

3 个答案: