Question

我正在创建一个页面，其中点击它会交换新数组的div内容。我不希望div在页面加载时为空，然后在点击时显示某些内容，我希望它从一个数组开始，然后单击更改到另一个数组。

以下是我的数组：

（页面加载时）

var food = [{logo:'img', name:'Pizza'}{logo:'img', name:'French Fries'}];

（点击）

var clothes = [{logo:'img', name:'T Shirt'}{logo:'img', name:'Black Turtleneck'}]; 

document.getElementById("choice1").innerHTML = food[0];
document.getElementById("choice2").innerHTML = food[1];

div id是“choice1”和“choice2”

HTML看起来像：

<div class="thumbnail">
<img id="choice1" src="" alt="...">
<div class="caption">
</br>
<p><a href="#" class="btn btn-default" onclick="choice1Function()" role="button">Select</a>
</p>
</div>
</div>

你会用什么来进行交换？

Answer 1

您可以使用this内部函数来表示单击的元素，还需要从要使用的对象中选择属性food[0].name

＆＃13;

var food = [{
  logo: 'img',
  name: 'Pizza'
}, {
  logo: 'img',
  name: 'French Fries'
}];

function choice1Function(e) {
  e.innerHTML = food[0].name;
}

function choice2Function(e) {
  e.innerHTML = food[1].name;
}

＆＃13;

<p><a href="#" class="btn btn-default" onclick="choice1Function(this)" role="button">Select</a></p>
<p><a href="#" class="btn btn-default" onclick="choice2Function(this)" role="button">Select</a></p>

＆＃13;

JavaScript数组：交换显示的内容

1 个答案: