Question

我有一个目录。当我单击产品时，转到家具页面。数据从json加载。家具页面的数据来自对象details。当我单击某个特定产品，然后在其详细信息页面上动态加载该产品时，该怎么做？（我可以使用javascript，jquery）

catalog.js

$(function() {
    $.getJSON('catalog.json', function(data) {
      $.each(data.catalog, function(i, category) {
        let $tblRow = $(
          "<tr><td>"+ category.title +
          "</td><td>"+ category.category +
          "</td><td>"+ category.price +
          "</td></tr>"
        );

        $tblRow.on('click', function(e){
          window.location ='furniture.html';
        });

        $tblRow.appendTo("#userdata");
      });
    });
  });

furniture.js

$(function() {
    $.getJSON('catalog.json', function(data) {
      $.each(data.catalog, function(i, category) {
        let $furnitures = $(
          "<section><div class=row><p>Type:</p><p>"+ category.details.type +
          "</p></div><div class=row><p>Create:</p><p>"+ category.details.create +
          "</p></div><div class=row><p>Country:</p><p>"+ category.details.country +
          "</p></div><div class=row><p>Material:</p><p>"+ category.details.material +
          "</p></div><div class=row> <p>Length:</p><p>"+ category.details.length +
          "</p></div> <div class=row><p>Height:</p><p>"+ category.details.height +
          "</p></div></section>"
        );
        $furnitures.appendTo("#right");
      });
    });
  });

JSON

{
    "catalog": [
        {
            "title": "FT-45",
            "category": "bed",
            "price": 200,
            "link":"furniture.html",
            "details": {
                "type":"2",
                "create":"Plus",
                "country":"USA",
                "material":"throw",
                "length":"150",
                "width":"120"
            }
        },
        {
            "title": "Fu",
            "category": "bed",
            "price": 300,
            "link":"2.html",
            "details": {
                "type":"4",
                "create":"Minus",
                "country":"Germany",
                "material":"bb",
                "length":"890",
                "width":"78"
            }
        }
    ]
 }

Answer 1

通过这种方式解决了该问题（删除了furniture.js）

catalog.js

var $f="";
var $titles="";


$(function() {
$.getJSON('catalog.json', function(data) {
  $.each(data.catalog, function(i, category) {
    let $tblRow = $(
      "<tr><td>"+ category.title +
      "</td><td>"+ category.category +
      "</td><td>"+ category.price +
      "</td></tr>"
    );

    $tblRow.on('click', function(e){
        $f=category;
        window.location ='furniture.html?param='+category.title;    
    });
    $tblRow.appendTo("#userdata");
  });
});
});

$(function() {
  $.getJSON('catalog.json', function(data) {
   $.each(data.catalog, function(i, category) {
   var get = window.location.search;
   test=decodeURI(get.substr(7));
    if (test==category.title){       
    let $furnitures = $(
      "<h2>"+category.title+"</h2><div class=row><p>Тип: </p><p>"+category.details.type +
      "</p></div><div class=row><p>Производитель:</p><p>"+ category.details.create +
      "</p></div><div class=row><p>Страна:</p><p>"+ category.details.country +
      "</p></div><div class=row><p>Материал:</p><p>"+ category.details.material +
      "</p></div><div class=row> <p>Длина:</p><p>"+ category.details.length +
      "</p></div> <div class=row><p>Шырина:</p><p>"+ category.details.width +
      "</p></div>"
    );

    $furnitures.appendTo("#right");

  }
  });
});
});

在JSON中打开子对象

1 个答案: