创建通用"next()“和"prev()”按钮时出现Javascript错误
创建通用"next()“和"prev()”按钮时出现Javascript错误
提问于 2018-10-25 09:11:08
我正在尝试编写简单的通用应用程序来循环浏览图像，但遇到了一个障碍。目前使用HTML和Javascript，代码如下：
//JS
var sliderNum = 0;
function next(array, index, String) {
var slider = document.getElementById(String);
index++;
if(index >= array.length) {
index = 0;
}
slider.src = array[index];
}
function prev(array, index, String) {
var slider = document.getElementById(String);
index--;
if(index < 0) {
index = array.length-1;
}
slider.src = array[index];
} <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div>
<button onclick="prev(img, sliderNum, 'slider')"> Prev </button>
<img id="slider" src="http://www.sololearn.com/uploads/slider/1.jpg" width="200px" height="100px"/>
<button onclick="next(img, sliderNum, 'slider')"> Next </button>
</div>
</body>
</html>
问题出在arg 'index‘上。当在函数中直接使用变量('sliderNum')时，按钮可以正常工作，但是当通过arg间接使用时，它们不能正确循环。这是恼人的，并使更普遍地应用函数的能力更成问题。逻辑有什么问题，因为我想让这些函数工作，这样我就再也不需要编写它们了？
谢谢。
回答 1
Stack Overflow用户
发布于 2018-10-25 09:19:26
说明:在JavaScript中，大多数东西都是对象(甚至是函数)，原始数据类型(字符串，数字，布尔值，null和未定义)不是对象，它们是不可变的，这意味着一旦创建，它们就不能被修改。
基元数据类型通过值传递，对象通过引用传递。
在本例中，您将在next函数中传递sliderNum。这就像将sliderNum的值赋给索引一样。因此，无论何时更改索引，原始sliderNum都不会更改。
在你的例子中，如果你创建一个对象并传入函数，即使你改变了localObject的值，它也会改变对象的值。
在HTML中
<button onclick="next(infoObject)"> Next </button>在你的脚本中
var infoObject = {'img': [], 'sliderNum':0};
function next(localObject) {
var slider = document.getElementById(String);
localObject.sliderNum++;
console.log(`localObject.index is --> ${localObject.sliderNum}`);// this will print 1
console.log(`infoObject.index is --> ${infoObject.sliderNum}`);// this will also print 1
}老办法:因为你是在函数中传递它们，所以它们被限制在函数作用域中，所以在外部定义它们
var sliderNum = 0;
var index = 0;
function next(array, String) {
var slider = document.getElementById(String);
index++;
if(index >= array.length) {
index = 0;
}
slider.src = array[index];
}
function prev(array, String) {
var slider = document.getElementById(String);
index--;
if(index < 0) {
index = array.length-1;
}
slider.src = array[index];
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52979948
复制相关文章
相似问题