发新贴  快速回复

图片排序的问题,用json嵌套数组,再用for循环生成图片和文字序列,可是怎么会重复呢,是因为有两个for吗,请老师帮忙看看,谢谢!

safari
2017-09-13 16:07

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ margin:0; padding:0}
body{ background:#ddd}
#div1{ width:1208px; height:486px; margin:0 auto;  background:yellow;}
ul li{ list-style:none; float:left;border:1px solid yellow; padding:10px; background:#fff;}
ul li img{ width:280px; height:180px;}
ul li span{ display:block; text-align:center; width:280px; height:43px; line-height:43px;background:#ddd;}
p{ text-align:center; margin:30px;}
p a{ width:100px; height:30px; background:#39C; margin:0 20px; padding:10px; color:#fff; text-decoration:none;}
</style>
<script>
window.onload=function(){
    var aA=document.getElementsByTagName('a');
    var oDiv=document.getElementById('div1');
    var oUl=oDiv.getElementsByTagName('ul')[0];
    var aLi=oUl.getElementsByTagName('li');
    var arr=[];
    var arr1=[];
    var str='';
           
    var json={
        'img':['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg','images/6.jpg','images/7.jpg','images/8.jpg'],
        'text':['1-温馨办公','2-游戏桌面','3-汽车摇滚','4-猪蹄相和','5-棒球小子','6-球鞋动力','7-游戏官网','8-指尖社区']
        }
        
    var onOff=true;
    
    for(var attr in json){
        for(var i in json[attr]){
            str+='<li><img src="'+json['img'][i]+'"><span>'+json['text'][i]+'</span></li>';            
            }
        }
    
    oUl.innerHTML=str;
    
    for(var i=0;i<aLi.length;i++){
        arr.push(aLi[i].innerHTML);
        }
        
    for(var i in arr){
        arr1.push(arr[i]);
        }

    aA[0].onclick=function(){
            arr1.reverse();
            str='';
            for(var i=0;i<arr1.length;i++){
                str+='<li>'+arr1[i]+'</li>';
            }//for
            oUl.innerHTML=str;
            
            this.innerHTML=onOff?'从小到大':'从大到小';
        
        }//onclick
        
        
    aA[1].onclick=function(){
        str='';    
        arr.sort(function(a,b){
            return Math.random()-0.5;
            })
        for(var i=0;i<arr.length;i++){
            
            str+='<li>'+arr[i]+'</li>';
        }
        oUl.innerHTML=str;
        }
        
    }//window
</script>
</head>

<body>
<p>
<a href="javascript:;">从大到小</a><a href="javascript:;">随机排序</a>
</p>
<div id="div1">    
    <ul>
        
    </ul>
</div>
</body>
</html>
 

附件下载:
 
 
leo

外面是 json,里面是数组,就这样拿数据:

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

<script>

var json={
        'img':['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg','images/6.jpg','images/7.jpg','images/8.jpg'],
        'text':['1-温馨办公','2-游戏桌面','3-汽车摇滚','4-猪蹄相和','5-棒球小子','6-球鞋动力','7-游戏官网','8-指尖社区']
        }

for (var attr in json) {
    for (var i=0; i<json[attr].length; i++) {
        alert( json[attr][i] );
    }
}

</script>

</body>
</html>

2017-09-13 16:43  回复本帖
登录 后才可以发表回复