Question

我正在点击一个非常棒的标记显示/隐藏Json的数据。

Answer 1

你可以通过循环json对象中的属性来实现它，如此

var json = {
  "France": [{
    "image": "img/ausralia.jpg",
    "description": "number django 1"
  }],
  "Australia": [{
    "image": "img/ausralia.jpg",
    "description": "number django 2"
  }]
}

$(document).ready(function() {
  // iterate all properties in the json object
  for (var prop in json) {
    if (json.hasOwnProperty(prop)) {
      // add the marker items
      $(".marker." + prop.toLowerCase()).on("click", function( country ) {
        $("#show").html(
          "Image : <img src=" + json[country][0].image + ">" +
          "| Description : <h1>" + json[country][0].description) + "</h1>";
      }.bind( this, prop) ); // prop needs to be bound so that the correct country is triggered
    }
  }
});

Answer 2

您可以使用Object.keys()和Array.prototype.forEach()以较短的方式迭代json个对象键：

$.getJSON('js/data.json', function (json) { // <-- json variable
  Object.keys(json).forEach(function (country) {
    $(".marker." + country.toLowerCase()).on("click", function () {
      $("#show").html(
        "Image: <img src=" + json[country][0].image + ">" +
        "| Description: <h1>" + json[country][0].description) + "</h1>";
    });
  });
});

Answer 3

我要做的最后一件事是从外部文件中调用Json数据

我试图将函数包装成

   $.getJSON('js/data.json', function(data) {

没有成功......

它告诉我线路上没有定义json（在控制台中）

Object.keys(json).forEach(function (country) {

任何想法？

非常感谢！

- 更新JSON结构----

{
    "france": [
        {
            "image": "img/ausralia.jpg",
            "description": "number django 1",
        }
    ],
       "australia": [
        {
            "image": "img/ausralia.jpg",
            "description": "number django 2",
        }
    ],

         "uk": [
        {
            "image": "img/ausralia.jpg",
            "description": "number django 3",
        }
    ]
}

显示此元素，而不是每次都重复代码

3 个答案: