Question

我正在尝试使随机播放功能在页面加载时发生。到目前为止，仅能成功打破它。

我尝试过

$(window).bind("load",function(){});

但是似乎无法让它完成我需要做的事情。

这是一个Codepen，具有有效的模型

任何帮助将不胜感激。我希望按一下“重置”按钮并进行页面重置，并在页面加载时将图像随机播放（图像2-5），并且可以完全删除随机播放按钮。

Answer 1

由于我有一个有效的版本，因此我将提供详细信息作为解决方案（太多的评论），希望能提供一些详细信息来纠正您的版本无法正常工作。< / p>

我正在使用的三个文件与您的文件对齐，分别称为so.html，so.js和so.css。

HTML：

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>SO Test</title>
    <link rel="stylesheet" type="text/css" href="/test/css/so.css" />
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>
    <script language="JavaScript" src="/test/script/so.js"></script>
  </head>

<body>
<div class="container shuffleImg">
... <!-- here I named the images uniquely, "Image 1" through "Image 8";
     otherwise same as your code -->
</div>

<button class="btn btn-danger" id="go">Shuffle</button>
<hr>
<button class="btn btn-danger" onClick="window.location.reload(true);">Reset</button>

</body>
</html>

JS：

//card flip function start
$(function() {
  // No change here to your first definition of this function
});

function rotateCard(btn) {
  //No change to this function
}
// card flip funtion end

// I hoisted shuffle out of the next $(function() ...) block since I use it again later
function shuffle() {
  // No change to function content
}

//random function start
$(function() {
  $("#go").on("click", shuffle);
});

$(window).load(function() {
  shuffle()
});
//random funtion end

我根本没有改变CSS。

这是一个使用以下代码的测试站点：Test。

编辑： 由于主要的提供程序都提供了指向“最新”的链接，因此我也在使用最新的jQuery库。我没有在您的jQuery代码中发现任何特别带有异国情调的东西，但是您的问题可能是您包含旧的和/或非官方的版本。

编辑： 根据评论，您已经表明您正在使用jQuery的“ slim”包。顾名思义，“ slim”包不包含jQuery的某些特定功能。请参见此SO问题，例如：What are the differences between normal and slim package of jQuery。特别是，不支持您使用的动画功能，也不支持.load函数。因此$(window).load(...)将失败。通过浏览器中的开发控制台可以看到这一点。

添加页面加载

1 个答案: