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

您必须知道索引和哪个数组才能使用splice从所述数组中删除该项：

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

您可以将数组与concat组合：

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

所以我会concat()将所有内容添加到1个数组并将当前显示的图像的索引存储在稍后可用于splice()的某个变量中

Answer 2

首先，你的三个for - 循环毫无意义，它们应该被删除。您将多次重新分配相同的三个变量。

其次，我将当前显示的图像（具有imagePath的图像）的对象存储在全局变量中，以便稍后可以访问它。要删除changeOfferRandom中当前显示的图片，您可以说

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

，与delete相对应，不会留下空位。

要获得新的随机优惠，请使用

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

这样，您的原始标记数组将被保留，以后可以访问。

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

2 个答案: