Question

这个想法是在浏览器中显示3个彩色球，因为随机选择的视频对应于其中一个彩球。用户只需要点击正确的相应球。当他们这样做时，该视频会被隐藏，下一个视频也会被显示，相应的彩色球将成为唯一可选择的球。

但是，似乎变量，或函数或浏览器或其他东西记住了以前的选择而没有正确地重置。我得到2个视频同时并排出现，而不是一个。一旦彩色球被.click功能触发一次，它总是起作用，即使它不应该起作用，因为.click功能已被设置为并使用下一个随机颜色。我怎么能阻止这种情况发生？

这里的屏幕截图显示了它应该是什么screenshot 。我的html和JQuery / javascript如下：

＆＃13;

selectColour()

function selectColour() {

  var myArray = ['red', 'blue', 'yellow'];

  //randomly select one of the colours in the array above.
  var rand = Math.floor(Math.random() * myArray.length);
  var concat = myArray[rand];

  random();

  function random() {

    //unhide/show the video of the random colour chosen.
    $('#' + (concat) + 'vid').show();

    //if the correct coloured ball is clicked, then hide the video.
    $('#' + (concat)).click(function() {
        $('#' + (concat) + 'vid').hide();
      }
    });
  selectColour()
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<!--Video links: These are all hidden until called by Jquery .show() -->

<iframe id="yellowvid" src="linkRemoved" width="240" height="320" frameborder="0"></iframe>
<iframe id="bluevid" src="linkRemoved" width="240" height="320" frameborder="0"></iframe>
<iframe id="redvid" src="linkRemoved" width="240" height="320" frameborder="0"></iframe>

<!--selectable coloured balls-->
<img id="blue" src="img/blue_dot.jpg" />
<img id="yellow" src="img/yellow_dot.jpg" />
<img id="red" src="img/red_dot.jpg" />

＆＃13;

Answer 1

正如评论中所提到的那样，你为selectColour创建了一个infite递归闭包，让它永远被称为

如何在此方案中重置缓存的javascript变量和函数？

1 个答案: