使用 JSON 数据更新 DIV 并显示/隐藏 DIV答案

【问题标题】：Update DIV with JSON data and Show/Hide DIVs使用 JSON 数据更新 DIV 并显示/隐藏 DIV
【发布时间】：2012-11-02 04:12:32
【问题描述】：

我有一个这样的 json 数组：

var headerStrings = [
        "Apple",
        "Banana",
        "Pineapple",
    ];

这是我的 HTML：

<div id="links">
    <ul>
        <li><a>One</a></li>
        <li><a>Two</a></li>
        <li><a>Three</a></li>
    </ul>
</div>

<div id="fruit">Mango</div>
<div>
    <div>Some content one</div>
    <div>Some content two</div>
    <div>Some content three</div>
</div>

当我点击“一个”链接时，我想做两件事：

将 DIV #fruit 的内容替换为数组中的第一项 - Apple。
显示第一个 DIV（一些内容）并隐藏其他两个 div

我也想对其他两个链接执行此操作 - 当我单击链接“两个”时，我想显示 DIV（一些内容二）并将 DIV #fruit 替换为数组中的第二项 -香蕉。

这是我尝试过的：

var items = $('#links ul li');
items.click(function(event){
    event.preventDefault();
    var which = $(this).index();
    $('div').find('div').hide().eq(which).show();
    $('#fruit').innerHTML = data.headerStrings[which];
});

感谢您的宝贵时间。

【问题讨论】：

What have you tried?
嗨，安德鲁，我用我的尝试更新了这个问题。

标签： jquery json show-hide

【解决方案1】：

DEMO

var headerStrings = [
    "Apple",
    "Banana",
    "Pineapple",
];

$('ul li a').each(function(i){
 $(this).click(function(){
     $('#fruit').html(headerStrings[i]);
     $('#content').children().hide().eq(i).show();
 });
});


<div>
<ul>
    <li><a>One</a></li>
    <li><a>Two</a></li>
    <li><a>Three</a></li>
</ul>

<div id="fruit">Mango</div>
 <div id='content'>
 <div>Some content one</div>
 <div>Some content two</div>
 <div>Some content three</div>
</div>

【讨论】：

【解决方案2】：

您可以使用 jquery 模板来解决这个问题。

Introduction to jquery templates 将帮助您入门。总而言之，您将加载所有 div 并将其隐藏，然后根据单击显示/隐藏 div。有一个jquery toggle div method for this.

【讨论】：