Question

使用JQuery如何在链接鼠标悬停时调用JSON让我说我有主DIV说

<div class="mainnav">
   <UL>
    <li id="mainnav1">Movie</li>
    <li id="mainnav2">Drama</li>
    <li id="mainnav3">trailer</li>
   </UL>
 </div>

鼠标悬停在Movie上的

想要显示subnav

  <div class="subnav">
   <Ul>
    <h3><a href="/comady.html">Comady</a></h3>
    <li><a href="/movies/KungFuDunk">KungFu Dunk</a></li>
    <li><a href="/movies/IntimateAffairs">Intimate Affairs</a></li>
    <li><a href="/movies//movies/HighHopes">High Hopes</a></li>
   </UL>
   <UL>
    <h3><a href="/classics.html">Classics</a></h3>
    <li><a href="/movies/TheWomanWhoCameBack">The Woman Who Came Back</a></li>
    <li><a href="/movies/TheNorthStar">The North Star</a></li>
  </UL>

我可以使用静态内容执行此操作，但我想要做的是DIV subnav中的任何内容都是动态的，所以我写了一些像这样的东西

   [ {    "catogoryName" : "Movie",
    "productGroupInformationList" : [ { "groupName" : "comady",
          "link" : "/comady.html",
          "productsInformationList" : [ { "productLink" : "/movies/KungFuDunk",
                "productTitle" : "Kung Fu Dunk"
              },
              { "productLink" : "/movies/IntimateAffairs",
                "productTitle" : "Intimate Affairs"
              },
              { "productLink" : "/movies/HighHopes",
                "productTitle" : "High Hopes"
              }
            ]
        },
        { "groupName" : "Classics",
          "link" : "/classics.html",
          "productsInformationList" : [ { "productLink" : "/movies/TheWomanWhoCameBack",
                "productTitle" : "The Woman Who Came Back"
              },
              { "productLink" : "/movies/TheNorthStar",
                "productTitle" : "The North Star"
              }
            ]
        }
      ]
  } ]

Answer 1

你可以尝试这个jQuery代码，

    var jsn = [ {    "catogoryName" : "Movie",
        "productGroupInformationList" : [ { "groupName" : "comady",
            "link" : "/comady.html",
            "productsInformationList" : [ { "productLink" : "/movies/KungFuDunk",
                  "productTitle" : "Kung Fu Dunk"
                },
                { "productLink" : "/movies/IntimateAffairs",
                  "productTitle" : "Intimate Affairs"
                },
                { "productLink" : "/movies/HighHopes",
                  "productTitle" : "High Hopes"
                }
              ]
          },
          { "groupName" : "Classics",
            "link" : "/classics.html",
            "productsInformationList" : [ { "productLink" : "/movies/TheWomanWhoCameBack",
                  "productTitle" : "The Woman Who Came Back"
                },
                { "productLink" : "/movies/TheNorthStar",
                  "productTitle" : "The North Star"
                }
              ]
          }
        ]
    } ];

 $("#mainnav1").hover(function(data) {
    for(var i in jsn)  {
        //alert( jsn[i].catogoryName);
        document.write(jsn[i].catogoryName + '<br>');
        var l2cnt = jsn[i].productGroupInformationList.length;
        for(var l2=0; l2<l2cnt; l2++ )  {
           document.write(jsn[i].productGroupInformationList[l2].groupName + '<br>');                                document.write(jsn[i].productGroupInformationList[l2].link + '<br>');
 var l3cnt =jsn[i].productGroupInformationList[l2].productsInformationList.length;
            for(var l3=0; l3<l3cnt; l3++)  {
                                   document.write(jsn[i].productGroupInformationList[l2].productsInformationList[l3].productLink + '<br>');
      document.write(jsn[i].productGroupInformationList[l2].productsInformationList[l3].productTitle + '<br>');
            }

        }

    }
});

Answer 2

查看jQuery Templates或mustache.js和underscore.js提供的类似功能。每个都允许您将JSON对象传递给模板，以允许将JSON渲染到模板中。

具有JSON内容的DropDown弹出窗口

2 个答案: