Question

我有一个像这样的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>

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

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

我也希望为其他两个链接执行此操作 - 当我单击链接'two'时，我想显示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];
});

感谢您的时间。

Answer 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>

Answer 2

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

Introduction to jquery templates会让你开始。总之，你将加载所有div并隐藏它，然后根据点击显示/隐藏div。有一个jquery toggle div method for this.

使用JSON数据和显示/隐藏DIV更新DIV

2 个答案: