该变量不能作为jquery中的全局变量

Question

I am going to write a simple "slider plugin" for jquery. 我将为jquery写一个简单的“滑块插件”。 I have 3 images in the name of "1.jpg" "2.jpg" and "3.jpg" that are located in folder "Images". 我有3张图片，名为“1.jpg”“2.jpg”和“3.jpg”，位于文件夹“Images”中。 I need them accordingly be shown in the div (with id:"slider") by clicking "next" button. 我需要它们相应地通过单击“下一步”按钮显示在div（带有id：“slider”）中。 After representing "3.jpg" the process should repeat again... 在表示“3.jpg”之后，该过程应该再次重复......

The following code works fine, but the variable "Counter" does not work as a global variable. 以下代码工作正常，但变量“Counter”不能作为全局变量。 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. 我的意思是在显示“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>

Answer 1

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. 问题是你使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' + ")");
 }

The fix is do not pass in counter. 该修复程序不会通过计数器。 Since it is global, the method ChangePic can read it. 由于它是全局的，因此ChangePic方法可以读取它。

Answer 2

When you name a parameter Counter, you hide the global Counter. 命名参数Counter时，将隐藏全局计数器。

So, setting Counter = 1 , you're changing only the local variable value. 因此，设置Counter = 1 ，您只更改局部变量值。 You could just change to: $.fn.ChangePic = function () { (no parameter) and the internal references to Counter would point to the global Counter. 您可以更改为： $.fn.ChangePic = function () { （无参数），对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. 实现这一点需要更大的复杂性，而不是原始问题的范围。

该变量不能作为jquery中的全局变量

问题描述

2 个解决方案

解决方案1
2 已采纳 2013-07-10 14:33:31

解决方案2
0 2013-07-10 14:43:13

该变量不能作为jquery中的全局变量

问题描述

2 个解决方案

解决方案1 2 已采纳 2013-07-10 14:33:31

解决方案2 0 2013-07-10 14:43:13

解决方案1
2 已采纳 2013-07-10 14:33:31

解决方案2
0 2013-07-10 14:43:13