我的 javascript function 部分工作/不能正常工作
[英]My javascript function is working partially/ not working properly
问题描述
我已经为 HTML 和 JS 代码分离了文件。我想制作一个 function ，它允许我在用另一个（如图像数组（？））单击它时更改图像，HTML-JS 链接完成如下这个：
<script src="file.js"></script>
我的 HTML 在这里：
`
<!DOCTYPE html>
<html>
<head>
<script src="proiect.js"></script>
</head>
<body>
<img src="images/image7.jpg" alt="path not found" class="dynamic-image" onclick="wrapper(1)">
<img src="images/image10.jpg" alt="path not found" class="dynamic-image" onclick="wrapper(0)">
</body>
</html>
`
我的 JS 代码：
var wrapper = function changeImg(param) {
'use strict';
var preloads=[],c;
function preload(){
for(c=0;c<arguments.length;c++) {
preloads[preloads.length]=new Image();
preloads[preloads.length-1].src=arguments[c];
}
c=0;
}
if (param==1){
preload('src1');
alert("param=1");}
if(param==0){
preload('src2');
alert("param=0");
}
document.getElementsByClassName('dynamic-image').addEventListener('click',
function() {
c++;
if(c==preloads.length) {
c=0;
}
this.src=preloads[c].src;
});
}
wrapper(param);
我的问题是，当我单击图像时，它会显示消息（参数 = 1 / 参数 = 0），但它不会改变图像，我不明白为什么......
4 个解决方案
解决方案1
0 2019-11-06 12:48:54
始终将脚本放在正文的末尾，因为您的脚本需要等待所有资源都加载完毕。
解决方案2
0 2019-11-06 13:26:57
你只需要这样做：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="images/image7.jpg" alt="path not found" class="dynamic-image" onclick="wrapper(1)">
<img src="images/image10.jpg" alt="path not found" class="dynamic-image" onclick="wrapper(0)">
<script src="proiect.js"></script> <!-- SCRIPT TAG AT THE END OF BODY TAG -->
</body>
</html>
整个问题是这样的：当您将script标签放在head中时，您的 function 在创建 DOM 之前触发......所以它甚至在创建图像之前执行。 最佳实践是将脚本放在正文标记的末尾。
解决方案3
0 2019-11-06 13:40:55
在加载所有<img>标签后，您的 JavaScript 文件需要位于页面底部。
您可以像这样格式化 HTML：
<!doctype html>
<html>
<body>
<img src="images/image7.jpg" alt="path not found" class="dynamic-image" onclick="wrapper(1)">
<img src="images/image10.jpg" alt="path not found" class="dynamic-image" onclick="wrapper(0)">
<script type="text/javascript" src="proiect.js"></script>
</body>
</html>
解决方案4
0 2019-11-06 14:51:54
你不需要你的“包装器（参数）；” 在您的 proiect.js 文件中，因为 function 由图像的属性“onclick”调用。
使用 addEventListener function，您无法使用 object，您必须使用 jquery 框架，例如：
var wrapper = function changeImg(param) {
'use strict';
var preloads=[],c;
function preload(){
for(c=0; c<arguments.length; c++) {
preloads[preloads.length] = new Image();
preloads[preloads.length-1].src = arguments[c];
}
c=0;
}
if (param == 1){
preload('images/image10.jpg');
// alert("param=1");
}
if(param == 0){
preload('images/image7.jpg');
// alert("param=0");
}
$('.dynamic-image').on('click', function() {
c++;
if(c == preloads.length) {
c=0;
}
console.log(this.src);
this.src = preloads[c].src;
});
}
还有你的 HTML 文件：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="images/image7.jpg" alt="path not found" class="dynamic-image" onclick="wrapper(1)">
<img src="images/image10.jpg" alt="path not found" class="dynamic-image" onclick="wrapper(0)">
<script src="proiect.js"></script>
<script src="jquery.min.js"></script>
</body>
</html>
当然，在您的文件夹中添加“jquery.min.js”文件： https://jquery.com/download/
我知道这不是您想要的，但它可以帮助您；-)
我的 javascript function 工作不正常
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.