仅显示Array中的一个项目

Question

With the following code, when you click on a hyperlink, it loads array items into the brand-content div. When you click the Nike hyperlink for example, it only loads item 3 from the array and the items 1 and 2 are missing?

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

The actual array that I will be using will be like the following:

  "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"),  

So do I need to add additional getAttributes for the additional fields in the array for everything to display?

this.getAttribute("id");
this.getAttribute("productTitle");
this.getAttribute("productDescription");

Volterony

Answer 1

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