The variable doesn't work as a global var in jquery
Question
I am going to write a simple "slider plugin" for jquery. I have 3 images in the name of "1.jpg" "2.jpg" and "3.jpg" that are located in folder "Images". I need them accordingly be shown in the div (with id:"slider") by clicking "next" button. After representing "3.jpg" the process should repeat again...
The following code works fine, but the variable "Counter" does not work as a global variable. I mean after showing "3.jpg" it should be equal to 1 (to show "1.jpg"), but it still increases and becomes 4,5,.... Please help me solve this issue.
<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 answers
solution1
2 ACCPTED 2013-07-10 14:33:31
The problem is you made Counter a new local variable and since you are using a type that is passed by value, it will not make changes to the global variable.
$.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' + ")");
}
The fix is do not pass in counter. Since it is global, the method ChangePic can read it.
solution2
0 2013-07-10 14:43:13
When you name a parameter Counter, you hide the global Counter.
So, setting Counter = 1 , you're changing only the local variable value. You could just change to: $.fn.ChangePic = function () { (no parameter) and the internal references to Counter would point to the global Counter.
But you don't need a global variable to do this:
(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);
This way you limit the scope of your counter to a local variable. This 'variable hiding' while still keeping a live reference to it is called closure.
NOTE: This implementation is not ideal yet. It does not allow, for example, to have two sliding pictures in the same page. Implementing this would required greater complexity that is not in the scope of original question.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.