发新贴  快速回复

javascript 数组里面一个作业,打乱图片排序,求助

  returnTrue
2017-11-25 00:42
 

/*
我的思路: 先定义一个数组[1,2,3,4,5,6,7,8] 下面用for循环生成了,每点击一次aInp[1],
让数组里面的数字随机排序, 之后再把随机排序的数字 相对应 json里面的urltext路径
但是到下面就不会写了,求助!!
*/
var url=json['url'];
var text=json['text'];
aInp[1].onclick=function(){
//alert(1);
//var t=null;
var arr=[];
for(var i=1;i<=8;i++){

arr.push(i); //把循环的0-7塞进数组arr里面
}
//数字里面的8个数字进行随机排序
arr.sort(function(a,b){
return Math.random()-0.3;
});

for(var i=0;i<arr.length; i++){
//arr[i] //随机排序的1-8数字,挨个显示 那么问题是: 这个随机产生的数字怎么对应json里面的url路径和text路径呢?
}


};

代码上传不上去,只能上传压缩包,懂得同学看下吧


附件下载:
 
2017年2月8日

你可以直接随机那个放图片src的数组,不需要再去弄个新数组了,你本身放图片就是数组,为什么还要去弄个新数组,再来随机,然后在和老数组一一对应呢?直接用图片的数组。而且最好用数组放json,json有src 和 标题,这样随机后图片和标题才能一一对应,不应该分开放。

 

例如:var arr=[{url:'img/1.jpg',title:'不会的时候想想我'},{url:'img/2.jpg',title:'想我的时候'},{url:'img/3.jpg',title:'含一颗糖在嘴里'},{url:'img/4.jpg',title:'甜甜的,好幸福'}];

 

按钮元素.onclick=function(){

arr.sort(function(){return Math.random()-0.5;});

for(var i=0;i<arr.length;i++){

aImg[i].src=arr[i].url;

aSpan[i].innerHTML=arr[i].title

}

}

 



 

这样来arr数组就随机排序了。图片和文字也能对应。方法很多。

2017-11-25 12:02  回复本帖
 
returnTrue

2017年2月8日 2017-11-25 12:02发表的内容:

你可以直接随机那个放图片src的数组,不需要再去弄个新数组了,你本身放图片就是数组,为什么还要去弄个新数组,再来随机,然后在和老数组一一对应呢?直接用图片的数组。而且最好用数组放json,json有src 和 标题,这样随机后图片和标题才能一一对应,不应该分开放。

 

例如:var arr=[{url:'img/1.jpg',title:'不会的时候想想我'},{url:'img/2.jpg',title:'想我的时候'},{url:'img/3.jpg',title:'含一颗糖在嘴里'},{url:'img/4.jpg',title:'甜甜的,好幸福'}];

 

按钮元素.onclick=function(){

arr.sort(function(){return Math.random()-0.5;});

for(var i=0;i<arr.length;i++){

aImg[i].src=arr[i].url;

aSpan[i].innerHTML=arr[i].title

}

}

 



 

这样来arr数组就随机排序了。图片和文字也能对应。方法很多。

太谢谢你了

2017-11-25 17:02  回复本帖
 
童童

同学你好,


你的arr数组已经经过了一轮sort打乱之后,


也就是说arr中就是乱序的0-7


 


那可以直接执行一个for循环,


使imgs[i].src = url[ arr[i] ]


下面的文字也是同样处理方式

2017-11-28 16:47  回复本帖
 
returnTrue

童童 2017-11-28 16:47发表的内容:

同学你好,


你的arr数组已经经过了一轮sort打乱之后,


也就是说arr中就是乱序的0-7


 


那可以直接执行一个for循环,


使imgs[i].src = url[ arr[i] ]


下面的文字也是同样处理方式

xiexie
2017-11-30 10:56  回复本帖
登录 后才可以发表回复