使用以下代码,当您单击超链接时,它会将数组项加载到品牌内容 div 中。例如,当您单击 Nike 超链接时,它只加载数组中的第 3 项,而缺少第 1 项和第 2 项?
<?php
$brand = array (
"nike" => array (
array('logo'=>'images/nike.png', 'description' =>'some nike text1'),
array('logo'=>'images/nike.png', 'description' =>'some nike text2'),
array('logo'=>'images/nike.png', 'description' =>'some nike text3')),
"puma" => array(
array('logo'=>'images/puma.png', 'description' =>'some puma text'),
array('logo'=>'images/puma.png', 'description' =>'some puma text'),
array('logo'=>'images/puma.png', 'description' =>'some puma text')),
"addidas" => array(
array('logo'=>'images/addidas.png', 'description'=>'some addidas text1'),
array('logo'=>'images/addidas.png', 'description'=>'some addidas text2'),
array('logo'=>'images/addidas.png', 'description'=>'some addidas text3')),
"Asics" => array(
array('logo'=>'images/Asics.png', 'description'=>'some Asics text'),
array('logo'=>'images/Asics.png', 'description'=>'some Asics text'),
array('logo'=>'images/Asics.png', 'description'=>'some Asics text')),
"Qicksilver" => array(
array('logo'=>'images/Qicksilver.png', 'description'=>'some Qicksilver text'),
array('logo'=>'images/Qicksilver.png', 'description'=>'some Qicksilver text'),
array('logo'=>'images/Qicksilver.png', 'description'=>'some Qicksilver text')),
);
?>
<style type="text/css">
a {
margin-left: 10px;
}
#brand-content {
margin-top: 50px;
border: solid 1px #000;
padding: 10px;
display: none;
width: 50%;
}
#brand-content img {
margin-right: 25px;
}
</style>
<script>var brand =<?php echo json_encode($brand) ?>;// json_encode($brand) is equivalent to the following: {"nike":[{"logo":"images\/nike.png","description":"some nike text"}, {"logo":"images\/nike.png","description":"some nike text"},{"logo":"images\/nike.png","description":"some nike text"}],"puma":[{"logo":"images\/puma.png","description":"some puma text"}, {"logo":"images\/puma.png","description":"some puma text"},{"logo":"images\/puma.png","description":"some puma text"}],"addidas":[{"logo":"images\/addidas.png","description":"some addidas text"},{"logo":"images\/addidas.png","description":"some addidas text"},{"logo":"images\/addidas.png","description":"some addidas text"}],"Asics":[{"logo":"images\/Asics.png","description":"some Asics text"},{"logo":"images\/Asics.png","description":"some Asics text"},{"logo":"images\/Asics.png","description":"some Asics text"}],"Qicksilver":[{"logo":"images\/Qicksilver.png","description":"some Qicksilver text"},{"logo":"images\/Qicksilver.png","description":"some Qicksilver text"}, {"logo":"images\/Qicksilver.png","description":"some Qicksilver text"}]}
function readyLinks() {
for (var n in brand) {
for (var i in brand[n]) {
var link = document.createElement("a");
link.href = brand[n][i].logo;
link.innerHTML = n;
link.setAttribute("data-description", brand[n][i].description);
link.onclick = function() {
document.getElementById("brand-content").innerHTML = "<img src=\"" + this.href + "\"/>" + this.getAttribute("data-description");
document.getElementById("brand-content").style.display = "block";
return false;
}
}
document.getElementById("brand-nav").appendChild(link);
}
}
window.onload = function() {
readyLinks();
}
</script>
<!-- body -->
<div id="brand-nav"></div>
<div id="brand-content"></div>
我将使用的实际数组如下所示:
"Nike" => array(
array('id'=>'01','logo'=>'images/nike-logo.jpg', 'productTitle' => "Nike Air Max",'productImage' => "images/airmax.jpg",'productDescription' => "Nike Air Max are awesome ",'rrp' => "RRP £100.00",'salePrice' => "Now ONLY £80.00"),
array('id'=>'02','logo'=>'images/nike-logo.jpg', 'productTitle' => "Nike Plus Running Shoes",'productImage' => "images/plus.jpg",'productDescription' => "Nike plus are even more awesome ",'rrp' => "RRP £120.00",'salePrice' => "Now ONLY £90.00"),
那么我是否需要为数组中的其他字段添加额外的 getAttributes 以显示所有内容?
this.getAttribute("id");
this.getAttribute("productTitle");
this.getAttribute("productDescription");
伏尔托尼
最佳答案
function readyLinks()
{
for (var n in brand){
for (var i in brand[n]){
var link = document.createElement("a");
link.href = brand[n][i].logo;
link.innerHTML = n;
link.setAttribute("data-description",brand[n][i].description);
link.onclick = function(){
document.getElementById("brand-content").innerHTML = "<img src=\""+this.href+"\"/>" + this.getAttribute("data-description");
document.getElementById("brand-content").style.display = "block";
return false;}
document.getElementById("brand-nav").appendChild(link);
}}}
关于javascript - 仅显示数组中的一项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21777050/