0

キー "options" と "message" を含む JSON オブジェクトを取得しますが、各オプション値にはドキュメント内の対応する 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 に答える