Question

使用以下代码，当您单击超链接时，它会将数组项加载到brand-content 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");

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

Answer 2

function readyLinks()
  {
  var company, link;
  for (company in brand)
    {
    link = document.createElement("a");
    link.innerHTML = company;
    link.LogoDescription_Arr=brand[company];
    link.onclick = function()
      {
      var container=document.getElementById("brand-content"); 
      var LogoDescription_Arr=this.LogoDescription_Arr, i, l =LogoDescription_Arr.length, item;
      var outPutHTML="";          
      for (i=0;i<l;i++)
        {
        item=LogoDescription_Arr[i];
        outPutHTML+= "<img src=\""+item.logo+"\"/>" +  item.description;
        }
      container.innerHTML=outPutHTML;          
      container.style.display = "block";
      return false;
      }
    document.getElementById("brand-nav").appendChild(link);
    }
  }

仅显示Array中的一个项目

2 个答案: