Question

我正在使用JSON文件，我正在处理图像。当我运行循环时，每个项目都显示在照片网格中的页面上。但在这样做之后，我想知道如何为每张照片分配一个网址。我需要他们每个指向一个特定的页面网址。

(function() {
    'use strict';

    var url = 'path to json';

    $.getJSON(url, function(json) {

        var categoryImage = '';

        $.each(json, function (i, item) {
            if (item.itemCommodity == "10") {
                categoryImage += '<div class="col-md-3 col-sm-6 col-xs-6">' + '<img class="img-responsive img-hover productImages" src="' + (item.imageURL) + '">' + '<h3 class="text-center">' + (item.itemName) + '</h3>' + '</div>';
            }
        });

        $('#categoryImages').html(categoryImage);
    });
})();

/* JSON Example */

[
   {
      "_id":"1",
      "itemName":"Tomatoes",
      "imageURL":"path to image",
      "itemCommodity":"10"
   },

   {
      "_id":"2",
      "itemName":"Olive Oil",
      "imageURL":"path to image",
      "itemCommodity":"20"
   }
]

Answer 1

您应该小心将JSON绑定到URL中，因为get请求的大小有限制，并且JSON可能会根据您放置的内容而变大。

鉴于此，如果你的json在一个变量中：

var myJson = [
   {
      "_id":"1",
      "itemName":"Tomatoes",
      "imageURL":"path to image",
      "itemCommodity":"10"
   },

   {
      "_id":"2",
      "itemName":"Olive Oil",
      "imageURL":"path to image",
      "itemCommodity":"20"
   }
]

您可以将其设为https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify的字符串，并将其安全地保存到网址：

var myJsonString = JSON.stringify(myJson);
window.location.hash = encodeURIComponent(myJsonString)

Answer 2

想出来了。使用if语句，但也会尝试使用switch语句。

Answer 3

我不太清楚你的意思

我需要他们每个人指向一个特定的页面网址。

由于你的图片已经有了一个URL（你的JSON中的那个），你想要一个锚点，所以当你输入特定的URL时，页面会自动移动＆＃34;特定图片？

不确定如何将JSON对象分配给URL

3 个答案: