如何确定已从数组调用了哪个值以在另一个函数中使用？

Question

我有下面的代码，称为onclick，并且希望能够在几秒钟后显示第二张图像，具体取决于从数组中选择了哪张图像-例如，如果显示了1.png，那么我想显示1s.png，2.png然后显示2s.png等

    function displayImage () {
            var img_name = new Array("images/1.png", "images/2.png", "images/3.png");
            var l = img_name.length;
            var rnd_no = Math.floor(l*Math.random());
            document.getElementById("imgHolder").src = img_name[rnd_no];
            }

如何确定从阵列中选择了哪个图像，然后将其用于其他功能？

Answer 1

您将需要一个全局变量，以了解该函数是否第一次运行。

var alreadyRandom = false;

function displayImage()
{
  var img_name = new Array("images/1.png", "images/2.png", "images/3.png");
  if(alreadyRandom)
  {
    // If the random for first time is done
    var rnd_no = img_name.indexOf(document.getElementById("imgHolder").getAttribute('src'));
    if(rnd_no === img_name.length-1)
    {
      // If the current image is the last one in array,
      // go back to the first one
      rnd_no = 0;
    }
    else
    {
      // Choose the next image in array
      rnd_no++;
    }
    document.getElementById("imgHolder").src = img_name[rnd_no];
  }
  else
  {
    var l = img_name.length;
    var rnd_no = Math.floor(l*Math.random());
    document.getElementById("imgHolder").src = img_name[rnd_no];
    alreadyRandom = true; // Tell the function not to random again
  }
  return img_name[rnd_no];
}

演示： http : //jsbin.com/kanejugahi/edit?html,js,console,output

此外，将数组设置为全局数组将使您的功能更高效。

希望这可以帮助，

Answer 2

我认为了解JavaScript中的功能如何工作以及作用域如何工作很重要。

您需要做的是公开这些信息，以便两个功能都可以访问。 您已经定义了图像数组，并且已经确定了随机数，因此只需在函数外部声明它们即可使它们可用，从而使这些变量现在可用。 在全局范围内定义变量通常是不好的做法，但这只是为了教学。

 var selectedImage; // defined outside so it is available for other functions function displayImage() { var img_name = new Array("images/1.png", "images/2.png", "images/3.png"); var rnd_no = Math.floor(img_name.length * Math.random()); selectedImage = img_name[rnd_no]; document.getElementById("imgHolder").src = selectedImage; } function anotherFunction() { console.log(selectedImage); } 

Answer 3

据我了解的问题，您可以使用return并将图像数组设为全局。

var img_name = new Array("images/1.png", "images/2.png", "images/3.png");
var img_class = '';
//this function will return the index of the image in array
function displayImage () {
   var l = img_name.length;
   var rnd_no = Math.floor(l*Math.random());
   document.getElementById("imgHolder").src = img_name[rnd_no];
   return rnd_no;
}

var nextimage;
function showImages(){
     //your logic to show the next image here
     nextimage = (displayImage ()+1)%img_name.length;
     var myVar = setInterval(function(){
     if(img_class==''){
        document.getElementById("imgHolder").src = img_name[nextimage];
        img_class = 's';
     }else{
        var img_arr = img_name[nextimage].split(".");
        if(img_arr.length===2){
           document.getElementById("imgHolder").src = img_arr[0]+"s."+img_arr[1];
        }

        img_class = '';
        nextimage = (nextimage+1)%img_name.length;
     }


   }, 1000);
}

 var img_name = new Array("images/1.png", "images/2.png", "images/3.png"); var img_class = ''; //this function will return the index of the image in array function displayImage () { var l = img_name.length; var rnd_no = Math.floor(l*Math.random()); document.getElementById("imgHolder").src = img_name[rnd_no]; return rnd_no; } var nextimage; function showImages(){ //your logic to show the next image here nextimage = (displayImage ()+1)%img_name.length; var myVar = setInterval(function(){ if(img_class==''){ document.getElementById("imgHolder").innerHTML = img_name[nextimage]; img_class = 's'; }else{ var img_arr = img_name[nextimage].split("."); if(img_arr.length===2){ document.getElementById("imgHolder").innerHTML = img_arr[0]+"s."+img_arr[1]; } img_class = ''; nextimage = (nextimage+1)%img_name.length; } }, 1000); } showImages(); 

 <div id="imgHolder"></div> 

Answer 4

可能会这样吗？

var images = ["images/1.png", "images/2.png", "images/3.png"];
function displayImage () {
    var dom = document.getElementById("imgHolder");
    if ( images.indexOf(dom.src) >=0 ) {
        dom.src = dom.src.replace(".png", "s.png"); // Seems like a stupid way to do this
        return;
    }
    var l = images.length;
    dom.src = images[Math.floor(l*Math.random())];
}