Question

我正在网站上工作，我希望让食谱页面充满活力。我创建了一个JSON测试数据库，创建了一个JS文件，该文件从JSON文件中检索值并在页面上的相应div中显示它们。

我想要做的是能够为每个食谱选择尊重的JSON，并在用户点击侧栏中的链接时将其显示在同一页面上，而不必创建大量具有相同div的空白HTML页面。

以下是我的代码。希望有人能指导我，谢谢！

(function() {

'use strict';

 var url = 'my json url';

 $.getJSON(url, function(json) {

     //store json data into variable 
     var data = (json);

     //store data in empty string
     var title = '';
     var image = '';
     var directions = '';
     var prep = '';
     var cook = '';
     var serve = '';

     //retrieve values from dataArray   
     $.each(data[0], function (i, item) {
         title += '<h1>' + item.recipeName + '</h1>';
         image += '<img src="' + item.imageURL + '">';
         directions += '<p>' + item.directions + '</p>';
         prep += '<strong>' + item.prepTime + '</strong>';
         cook += '<strong>' + item.cookTime + '</strong>';
         serve += '<strong>' + item.servInfo + '</strong>';
     });

     //append results to div
     $('#recipeTitle').html(title);
     $('#recipeImage').html(image);
     $('#recipeDirections').html(directions);
     $('#recipePrep').html(prep);
     $('#recipeCook').html(cook);
     $('#recipeServes').html(serve);

     var ul = $('<ul class="nav nav-stacked">').appendTo('#recipeIngredients');

     $.each(data[0][0].ingredients, function(i, item) {
         ul.append($(document.createElement('li')).text(item));
     });

 });

}）（）;

新代码`（function（）{ 函数回调（json）{

 //store json data into variable 
 var data = (json);

 //store data in empty string
 var title = '';
 var image = '';
 var directions = '';
 var prep = '';
 var cook = '';
 var serve = '';

 //retrieve values from dataArray   
     $.each(data[0], function (i, item) {
         title += '<h1>' + item.recipeName + '</h1>';
         image += '<img src="' + item.imageURL + '">';
         directions += '<p>' + item.directions + '</p>';
         prep += '<strong>' + item.prepTime + '</strong>';
         cook += '<strong>' + item.cookTime + '</strong>';
         serve += '<strong>' + item.servInfo + '</strong>';
     });

     //append results to div
     $('#recipeTitle').html(title);
     $('#recipeImage').html(image);
     $('#recipeDirections').html(directions);
     $('#recipePrep').html(prep);
     $('#recipeCook').html(cook);
     $('#recipeServes').html(serve);

     var ul = $('<ul class="nav nav-stacked">').appendTo('#recipeIngredients');


 $.each(data[0][0].ingredients, function(i, item) {
     ul.append($(document.createElement('li')).text(item));
 });
}

$('#pasta').click(function(){
  $('#recipeIngredients').empty();
  //get the url from click coresponding to the item
  $.getJSON(url,callback);
});

//intially load the recipies with the URL 
var url = '';
$.getJSON(url,callback);

}）（）;`

Answer 1

要实现代码可重用性，请尝试在单击边栏中的链接时使用可重用函数（回调）调用$ .getJSON（）

(function() {
     function callback(json){

     //store json data into variable 
     var data = (json);

     //store data in empty string
     var title = '';
     var image = '';
     var directions = '';
     var prep = '';
     var cook = '';
     var serve = '';
    ....     //rest of the code
    ...
     $.each(data[0][0].ingredients, function(i, item) {
         ul.append($(document.createElement('li')).text(item));
     });
    }

    $('.sidebarLink').click(function(){
      $('#recipeIngredients').empty()
      //get the url from click coresponding to the item
      $.getJSON(url,callback);
    });

    //intially load the recipies with the URL 
    var url = 'my json url';
    $.getJSON(url,callback);

})();

协助JSON动态更改页面内容

1 个答案: