使用jquery引用元素ID为的JSON

因此，这是我第一次将JSON与jquery结合使用，我对我想做的事情有了一定的了解，如果能提供任何帮助，或者能指出正确的方向，我将不胜感激

我的HTML设置如下：

<div id="agriculture" class="btn"><div>
<div id="treasurer" class="btn"><div>
<div id="war" class="btn"><div>
..... (about 16 of these)


<div id="content_container">
    <div id="title"></div>
    <img id="photo" src="" />
    <div id="summary"></div>
</div>        

这里设置的目标是当您单击“.btn”时，它获取attr（'id'），并使用它从JSON调用正确的变量，因为它们匹配，然后将该内容放入内容容器的正确divs/img src中

这样做合理吗？如果它是或不是一个有人推我的正确方向

---

非常感谢你的帮助

这不是JSON，而是Javascript对象文本。JSON是一种表示数据的文本格式

如果已全局声明变量，则可以作为

窗口

对象的成员访问它们：

$('.btn').click(function(){
  var id = $(this).attr('id');
  var obj = window[id];
  $('#title').text(obj.title);
  $('#photo').attr('src', obj.location);
  $('#summary').text(obj.summary);
});

---

演示：

这不是JSON，而是Javascript对象文本。JSON是一种表示数据的文本格式

如果已全局声明变量，则可以作为

窗口

对象的成员访问它们：

$('.btn').click(function(){
  var id = $(this).attr('id');
  var obj = window[id];
  $('#title').text(obj.title);
  $('#photo').attr('src', obj.location);
  $('#summary').text(obj.summary);
});

演示：

JSON

只是JavaScript对象表示法，通过执行

var foo={bar:“foobar”}

，您实际上是在创建一个变量并将其属性存储在一个变量中

使用元素的

id

是个坏主意，因为

id

应该是元素的唯一标识符，而不是数据存储。在我的示例中，我使用了

数据属性

，但这可以是您想要的任何内容

HTML 查看以查看它的运行情况

这里有一个有多个数据点的例子，JSON就是JavaScript对象表示法，通过执行

var foo={bar:“foobar”}

，实际上是在创建一个变量并将其属性存储在一个变量中

使用元素的

id

是个坏主意，因为

id

应该是元素的唯一标识符，而不是数据存储。在我的示例中，我使用了

数据属性

，但这可以是您想要的任何内容

HTML 查看以查看它的运行情况

---

下面是一个有多个数据点的示例

我会这样做：

var data = {
    agriculture: {
        title: "Secretary of Agriculture",
        location: "url for photo used",
        summary: "summary of cabinet position"
    },
    treasurer: {
        title: "Secretary of the Treasury",
        location: "url for photo used",
        summary: "summary of cabinet position"
    },
    war: {
        title: "Secretary of War",
        location: "url for photo used",
        summary: "summary of cabinet position"
    }
};

var $title = $('#title');
var $photo = $('#photo');
var $summary = $('#summary');

$('.btn').on('click', function () {
    console.log( data[this.id] );
    $title.html( data[this.id].title );
    $photo.attr('src', data[this.id].location );
    $summary.html( data[this.id].summary );
});

---

我会这样做：

var data = {
    agriculture: {
        title: "Secretary of Agriculture",
        location: "url for photo used",
        summary: "summary of cabinet position"
    },
    treasurer: {
        title: "Secretary of the Treasury",
        location: "url for photo used",
        summary: "summary of cabinet position"
    },
    war: {
        title: "Secretary of War",
        location: "url for photo used",
        summary: "summary of cabinet position"
    }
};

var $title = $('#title');
var $photo = $('#photo');
var $summary = $('#summary');

$('.btn').on('click', function () {
    console.log( data[this.id] );
    $title.html( data[this.id].title );
    $photo.attr('src', data[this.id].location );
    $summary.html( data[this.id].summary );
});

---

最好将值存储在带有命名键的字典结构中，而不是创建独立变量。以下是一个例子：

var data = {
    agriculture: {"title" : "Secretary of Agriculture",
                     "location" : "url for photo used",
                     "summary" : "summary of cabinet position"
                 },

    treasurer:   {"title" : "Secretary of the Treasury",
                     "location" : "url for photo used",
                     "summary" : "summary of cabinet position"
                  }
};

然后访问您的对象：

$('.btn').click(function(){
     var id = $(this).attr('id');
     console.log(data[id]);
});

---

最好将值存储在具有命名键的字典结构中，而不是创建独立变量。以下是一个例子：

var data = {
    agriculture: {"title" : "Secretary of Agriculture",
                     "location" : "url for photo used",
                     "summary" : "summary of cabinet position"
                 },

    treasurer:   {"title" : "Secretary of the Treasury",
                     "location" : "url for photo used",
                     "summary" : "summary of cabinet position"
                  }
};

然后访问您的对象：

$('.btn').click(function(){
     var id = $(this).attr('id');
     console.log(data[id]);
});

---

---

为什么要投否决票？如果你不解释你认为错误的地方，那就无法改善答案。对不起，伙计！我没有投你反对票，我还在看这一切！我投了否决票，因为您没有描述任何推理，您在每次事件触发时搜索dom数次，并在窗口中搜索任意属性（如果这是在函数中，则无法工作）。这些都是非常错误的，将来可能会引起冲突。很抱歉，我没有早点回复。@KorvinSzanto:我搜索了DOM好几次，因为有几个元素需要填充，完全符合OP的要求。我在

窗口

对象中搜索一个完全不是任意的属性，因为id与变量名匹配，与OP指定的完全相同。正如我在回答中特别指出的那样，由于变量是全局的，所以它工作得很好。这是怎么回事？谢谢！这非常有帮助，让我到达了我需要的地方，非常感谢！为什么要投否决票？如果你不解释你认为错误的地方，那就无法改善答案。对不起，伙计！我没有投你反对票，我还在看这一切！我投了否决票，因为您没有描述任何推理，您在每次事件触发时搜索dom数次，并在窗口中搜索任意属性（如果这是在函数中，则无法工作）。这些都是非常错误的，将来可能会引起冲突。很抱歉，我没有早点回复。@KorvinSzanto:我搜索了DOM好几次，因为有几个元素需要填充，完全符合OP的要求。我在

窗口

对象中搜索一个完全不是任意的属性，因为id与变量名匹配，与OP指定的完全相同。正如我在回答中特别指出的那样，由于变量是全局的，所以它工作得很好。这是怎么回事？谢谢！这非常有帮助，让我到达了我需要的地方，非常感谢！我没有投反对票，但到目前为止，这似乎是我见过的最好的回答，使用attr数据似乎更好，我不太了解它。两个问题在JSON符号中是什么样子的，两个问题变量是否可以存储多于一条信息，例如：标题、描述、，photo@loriensleafsJSON符号不存在。JSON是Javascript对象表示法。所有json字符串都是有效的JavaScript对象或数组。但是，要使JavaScript对象成为json，它必须是字符串，并且所有键和字符串值都必须用双引号括起来。事实并非如此@KevinB，

json

支持utf-8，而

JavaScript

不支持utf-8。我没有投反对票，但这似乎是迄今为止我看到的最好的回应，使用数据属性似乎更好，我不太了解它。两个问题在JSON符号中是什么样子的，两个问题变量是否可以存储多于一条信息，例如：标题、描述、，photo@loriensleafsJSON符号不存在。JSON是Javascript对象表示法。所有json字符串都是有效的JavaScript对象或数组。但是，对于要成为json的JavaScript对象，它必须是字符串，并且所有键和字符串值都必须用双引号括起来。这并不完全是@KevinB的情况，

json

支持utf-8，而

JavaScript

不支持utf-8。那么如何将它们加载到div中呢