想要在單擊帶有JSON數據的側邊欄中的鏈接時動態更改div

Question

我正在一個食譜頁面上工作，我有一些當前可獲取JSON數據並將其顯示在頁面上相應div上的代碼。 我想實現代碼的可重用性，並能夠根據邊欄中的鏈接動態更改內容，並使其獲取正確的JSON數據並更新頁面上的div。 目前，我的數據僅從JSON數據庫中提取一種配方，並將其顯示在頁面上。 我要避免制作多個頁面並為每個配方復制JS。

摘錄如下：

 (function() { 'use strict'; var url = ''; // $.getJSON(url, function(json) { var json = [ [ { "id":"1", "category":"pasta", "seasonal":"fall", "recipeName":"Bolognese Sauce", "prepTime":"20 Min", "cookTime":"30 Min", "servInfo":"4-6", "directions":"lorem ipsum", "ingredients":[ "1 lb Rigatoni", "3 tbsp Extra Virgin Olive Oil, plus extra for drizzling", "1 cup white onions, diced", "¼ cup carrots, diced", "¼ cup celery, diced", "1 ½ lb. ground beef", "¼ cup Tomato Paste in a Tube", "1 1/2 cup All Purpose Beef Broth", "½ cup heavy cream", "1 Bay Leaf", "1 can Certified San Marzano Tomatoes (28 oz), crushed by hand", "1 can All Purpose Crushed Tomatoes (28 oz)", "¼ cup fresh basil, chopped", "Salt and Ground Black Pepper, to taste" ], "imageURL":"path", "href": "path" } ], [ { "id":"2", "category":"pizza", "seasonal":"winter", "recipeName":"Arugula Pizza", "prepTime":"30 Min", "cookTime":"10 Min", "servInfo":"3-4", "directions":"lorem ipsum", "ingredients":[ "4 lb Rigatoni", "3 tbsp Extra Virgin Olive Oil, plus extra for drizzling", "1 cup white onions, diced", "¼ cup carrots, diced", "¼ cup celery, diced", "1 ½ lb. ground beef", "¼ cup Tomato Paste in a Tube", "1 1/2 cup All Purpose Beef Broth", "½ cup heavy cream", "1 Bay Leaf", "1 can Certified San Marzano Tomatoes (28 oz), crushed by hand", "1 can All Purpose Crushed Tomatoes (28 oz)", "¼ cup fresh basil, chopped", "Salt and Ground Black Pepper, to taste" ], "imageURL":"path", "href": "path" } ] ]; var title = ''; var image = ''; var directions = ''; var prep = ''; var cook = ''; var serve = ''; $.each(json[0], function(i, item) { title += '<h1>' + item.recipeName + '</h1>'; image += '<img class="imgJSONheader" src="' + item.imageURL + '">'; directions += '<p>' + item.directions + '</p>'; prep += '<strong>' + item.prepTime + '</strong>'; cook += '<strong>' + item.cookTime + '</strong>'; serve += '<strong>' + item.servInfo + '</strong>'; }); $('#recipeTitle').html(title); $('#recipeImagesHeader').html(image); $('#recipeDirections').html(directions); $('#recipePrep').html(prep); $('#recipeCook').html(cook); $('#recipeServes').html(serve); var ul = $('<ul class="nav nav-stacked">').appendTo('#recipeIngredients'); $.each(json[0][0].ingredients, function(i, item) { ul.append($(document.createElement('li')).text(item)); }); var images = ''; var collection = []; $.each(json, function(i, item) { if ($.inArray(item[0].category, collection) === -1) { collection.push(item[0].category); images += '<div class="col-md-6 col-sm-6">' + '<a href="' + (item[0].href) + '">' + '<img class="img img-responsive img-hover imgJSONCategory" src="' + (item[0].imageURL) + '">' + '</a>' + '<h1>' + (item[0].category) + '</h1>' + '</div>'; } }); $('#imagesCategory').html(images); // }); })(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Test Header Start --> <section> <div class="carousel fade-carousel slide" data-ride="carousel" data-interval="4000" id="bs-carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item slides active"> <div id="recipeImagesHeader"></div> <div class="hero"> <hgroup> <h1>Sauces</h1> </hgroup> </div> </div> </div> </div> </section> <!-- Test Header End --> <!-- Test Recipe Sidebar Container --> <section> <div class="container"> <div class="row"> <!-- Sidebar Start --> <div class="col-md-3 visible-lg visible-md"> <ul class="nav nav-stacked" id="sidebar"> <li class="sidebarLink"><a href="">Seasonal</a> </li> <li><a href="#">Breakfast</a> </li> <li><a href="#">Pasta</a> </li> <li><a href="#">Sauces</a> </li> <li><a href="#">Appetizers</a> </li> </ul> </div> <!-- Main Section Start --> <div class="col-md-9" id="mainCol"> <div class="row" id="mainHeader"> <!-- Title Start --> <div class="col-md-5"> <div id="recipeTitle"></div> </div> <!-- Prep, Cook, Serves Start --> <div class="col-md-7"> <div class="row"> <div class="col-md-4 col-sm-4 col-xs-4"> <h4>Prep Time</h4><span id="recipePrep"></span> </div> <div class="col-md-4col-sm-4 col-xs-4"> <h4>Cook Time</h4><span id="recipeCook"></span> </div> <div class="col-md-4col-sm-4 col-xs-4"> <h4>Serves</h4><span id="recipeServes"></span> </div> </div> </div> </div> <div class="row"> <!-- Ingredients Start --> <div class="col-md-5"> <h2>Ingredients</h2> <div id="recipeIngredients"></div> </div> <!-- Directions Start --> <div class="col-md-7"> <h2>Directions</h2> <div id="recipeDirections"></div> </div> </div> </div> </div> </div> </section> <!-- /.row --> 

Answer 1

您是否嘗試過將初始循環包裝在循環中。

 $.each(json, function(idx, json_item) { 
     $.each(json_item, function (i, item) {
         title += '<h1>' + item.recipeName + '</h1>';
         image += '<img class="imgJSONheader" src="' + item.imageURL + '">';
         directions += '<p>' + item.directions + '</p>';
         prep += '<strong>' + item.prepTime + '</strong>';
         cook += '<strong>' + item.cookTime + '</strong>';
         serve += '<strong>' + item.servInfo + '</strong>';
     });
)};

鏈接到Codepen