0

因此，这是我第一次将 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>

然后我打算像这样设置一堆 JSON 变量：

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

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

这是一种合理的方式吗？如果是或不是有人推动我正确的方向？

非常感谢您的帮助！

4

4 回答 4

3

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

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]);
});
于 2013-08-01T18:12:29.293 回答
1

That's not JSON, that's Javascript object literals. JSON is a text format for representing data.

If you have declared the variables globally, you can access them as members of the window object:

$('.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);
});

Demo: http://jsfiddle.net/nZkfq/

于 2013-08-01T18:08:42.377 回答
1

JSON只是JavaScript Object Notation，通过这样做var foo = { bar : "foobar" }，您实际上是在创建一个object literal并将其属性存储在一个变量中。

使用id元素的 是一个坏主意，因为id应该是元素的唯一标识符，而不是数据存储。在我的示例中，我使用了data-attribute，但这可以是您想要的任何内容。

HTML

<a href="#" class="data-accessor" data-attribute="foo">Click this for foo!</a><br />
<a href="#" class="data-accessor" data-attribute="bar">Click this for bar!</a><br />

JavaScript

var data = {
    foo : "You clicked foo!",
    bar : "You clicked bar!"
}

$('a.data-accessor').click(function() {
    var me = $(this);
    alert(data[me.attr('data-attribute')]);
    return false;
});

查看这个 jsfiddle以查看它的实际效果。

这是一个包含多个数据点的示例http://jsfiddle.net/gSgyP/

于 2013-08-01T18:09:57.963 回答
0

我会做这样的事情：

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 );
});

http://fiddle.jshell.net/87T3P/

于 2013-08-01T18:11:40.687 回答