该变量在jquery中不能作为全局变量使用
该变量在jquery中不能作为全局变量使用
提问于 2013-07-10 22:22:15
我将为jquery编写一个简单的“滑块插件”。我有3个名称为"1.jpg“、"2.jpg”和"3.jpg“的图像，它们位于文件夹" images”中。我需要他们相应地显示在div (与id：“滑块”)通过点击“下一步”按钮。在表示"3.jpg“之后，这个过程应该再次重复...
下面的代码运行良好，但变量"Counter“不能作为全局变量使用。我的意思是，在显示"3.jpg“之后，它应该等于1(显示"1.jpg")，但它仍然增加并变为4,5，...请帮我解决这个问题。
<head>
<title></title>
<script src="Scripts/jquery-1.7.1.js"></script>
<script type="text/javascript">
var Counter = 1;
(function ($) {
$.fn.ChangePic = function (Counter) {
MAX_numberOF_Images=3;
if (Counter > MAX_numberOF_Images) {
Counter = 1;
}
this.css("background-image", "url(" + 'Images/' + Counter + '.jpg' + ")");
}
})(jQuery);
$(document).ready(function () {
$("#slider").css("background-image", "url(Images/1.jpg)");
$("#Next").click(function () {
Counter++;
alert(Counter);
$("#slider").ChangePic(Counter);
});
});
</script>
</head>
<body>
<div id="slider" style="width:200px;height:100px;border:1px solid black"></div>
<input type="button" id="Next" value="Next"/>
</body> 回答 2
Stack Overflow用户
回答已采纳
发布于 2013-07-10 22:33:31
问题是您将Counter设置为一个新的局部变量，并且由于您使用的是通过值传递的类型，因此它不会对全局变量进行更改。
$.fn.ChangePic = function (Counter) { <-- Declaring Counter here makes it a local variable
MAX_numberOF_Images=3;
if (Counter > MAX_numberOF_Images) {
Counter = 1; <-- setting local variable, not global
}
this.css("background-image", "url(" + 'Images/' + Counter + '.jpg' + ")");
}修复方法是不传入计数器。因为它是全局的，所以方法ChangePic可以读取它。
Stack Overflow用户
发布于 2013-07-10 22:43:13
在命名参数计数器时，会隐藏全局计数器。
因此，在设置Counter = 1时，您只需更改局部变量值。您只需更改为：$.fn.ChangePic = function () { (无参数)，对计数器的内部引用将指向全局计数器。
但您不需要全局变量来执行此操作：
(function ($) {
var counter = 1;
var maxNumberOfImages = 3;
$.fn.ChangePic = function () {
if (counter > maxNumberOfImages) {
counter = 1;
}
this.css("background-image", "url(" + 'Images/' + counter + '.jpg' + ")");
counter++;
}
})(jQuery);通过这种方式，您可以将计数器的范围限制为局部变量。这种‘隐藏变量’，同时仍然保持对它的活动引用称为闭包。
注意：这个实现还不够理想。例如，它不允许在同一页面中有两个滑动图片。实现这一点将需要更大的复杂性，这不在原始问题的范围内。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17573156
复制相关文章
相似问题
腾讯云开发者
