如何随机选择一个数组，然后在javaScript中随机选择一个元素？

Question

我正在通过数组显示图像。我的问题是与功能changeOfferRandom就是我希望做的，是删除当前图像从它的随机排列，因此不会再出现，然后从随机排列显示另一个图像。

我是新来这个，所以我不知道都怎么尝试此。我没有将所有这些图像放在一个数组中的原因是因为稍后我将添加一个函数，以仅基于标签显示图像。这些数组基于标签。无论如何，我相信我需要能够识别正在显示的图像。

var data = []; 

function importJson(str) { 

    if (str=="") { 
     document.getElementById("content").innerHTML=""; 
     return; 
    } 
    if (window.XMLHttpRequest) { 
     // code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp=new XMLHttpRequest(); 
    } else { // code for IE6, IE5 
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 

    } 


    xmlhttp.onreadystatechange=function() { 


     if (xmlhttp.readyState==4 && xmlhttp.status == 200){ 


     data = JSON.parse(xmlhttp.response); 
     alert(xmlhttp.response); 
     var fullindex = data.clothes.length + data.food.length + data.sport.length; 



     for (var sport_index = 0; sport_index < data.sport.length; sport_index++) { 

       var id1 = data.sport[sport_index].ImagesId; 
       var url1 = data.sport[sport_index].ImagesPath; 
       var tag1 = data.sport[sport_index].Tag; 

      } 


      for (var food_index = 0; food_index < data.food.length; food_index++) { 
       var id2 = data.food[food_index].ImagesId; 
       var url2 = data.food[food_index].ImagesPath; 
       var tag2 = data.food[food_index].Tag; 

      } 

      for (var clothes_index = 0; clothes_index < data.clothes.length; clothes_index++) { 
       var id3 = data.clothes[clothes_index].ImagesId; 
       var url3 = data.clothes[clothes_index].ImagesPath; 
       var tag3 = data.clothes[clothes_index].Tag; 

      } 

      function firstRandom(){ 
       var possibleImages = [url3, url2, url1]; 
       var offer = possibleImages[(Math.random() * possibleImages.length)|0]; 
       buildImage(offer); 

      } 

      firstRandom(); 
     } 

    } 

    xmlhttp.open("GET","http://server/~name/folder/many.php"); 
    xmlhttp.responseType = "json"; 
    xmlhttp.send(); 


    function buildImage(imagesrc) { 
     var img = document.createElement('img'); 
     img.src = imagesrc; 
     document.getElementById('content').appendChild(img); 



    } 


} 


function changeOfferRandom() { 
     delete data[currentImage]; //not sure how to achieve this. 
     var allArrays = [url3, url2, url1]; //not sure how to access the full arrays. 
     var randomO = allArrays[(Math.random() * possibleImages.length)|0]; 
     buildImage(randomO); 
} 


window.onload = importJson(); 

xmlhttp.response看起来是这样的：

{"sport":[ 
    {"ImagesId":"34","ImagesPath":"http:\/\/server\/~name\/folder\/images\/24-08-2014-1408868419.png","Tag":"sport"}, 
    {"ImagesId":"30","ImagesPath":"http:\/\/server\/~name\/folder\/images\/23-08-2014-1408824125.png","Tag":"sport"}], 
"clothes":[ 
    {"ImagesId":"33","ImagesPath":"http:\/\/server\/~name\/folder\/images\/23-08-2014-1408824179.png","Tag":"clothes"}, 
    {"ImagesId":"32","ImagesPath":"http:\/\/server\/~name\/folder\/images\/23-08-2014-1408824166.png","Tag":"clothes"}], 
"food":[ 
    {"ImagesId":"31","ImagesPath":"http:\/\/server\/~name\/folder\/images\/23-08-2014-1408824158.png","Tag":"food"}] 
} 

Answer 1

首先，你的三个for -loops是没有意义的，他们应该被删除。您将多次重新分配相同的三个变量。其次，我会将当前显示的图像（具有imagePath的图像）的对象存储在全局变量中，以便稍后可以访问该图像。 要删除当前显示的图像中changeOfferRandom那么你可以说

var tagArray = data[currentlyShownOffer.Tag]; 
tagArray.splice(tagArray.indexOf(currentlyShownOffer), 1); 

其中，在constrast到delete，不留一个空槽。

要获得一个新的随机优惠，请与

var tags = Object.keys(data); 
var randomTag = tags[Math.floor(Math.random() * tags.length)]; 
window.currentlyShownOffer = randomTag[Math.floor(Math.random() * randomTag.length)]; 

这样一来，原来的tagified阵列将被保留，并且可以稍后访问。

Answer 2

你必须知道索引和阵列，以便从所述阵列和splice删除项目：

array.splice(indexOfCurrentImage, 1); // deletes 1 item starting from indexOfCurrentImage 

你可以concat结合阵列：

var allArrays = data.sport.concat(data.food, data.clothes); 

，所以我会concat()一切1个阵列和图像的索引存储目前在一些变量显示，你可以在以后使用splice()