该变量在 jquery 中不能用作全局变量

我将为jquery编写一个简单的"滑块插件"。我有三张图片，名称分别为"1.jpg"、"2.jpg"one_answers"3.jpg"，它们位于文件夹"images"中。我需要通过单击"下一步"按钮将它们相应地显示在div中（id为"slider"）。在表示"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>

问题是您将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可以读取它。

当您将参数命名为Counter时，会隐藏全局Counter。

因此，设置Counter = 1时，只更改局部变量值。您可以更改为：$.fn.ChangePic = function () {（无参数），对Counter的内部引用将指向全局Counter。

但你不需要全局变量：

(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);

通过这种方式，您可以将计数器的作用域限制为一个局部变量。这种"变量隐藏"同时仍然保留对它的实时引用称为闭包。

注意：此实现尚不理想。例如，它不允许在同一页中有两个滑动图片。实现这一点需要更大的复杂性，而这不在最初问题的范围内。

相关内容

最新更新

热门标签：