Question

我将为jquery编写一个简单的“滑块插件”。我有3张图片，名为“1.jpg”“2.jpg”和“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>

Answer 1

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

Answer 2

命名参数Counter时，隐藏全局计数器。

因此，设置Counter = 1，您只会更改局部变量值。您可以更改为：$.fn.ChangePic = function () {（无参数），对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);

这样就可以将计数器的范围限制为局部变量。这个“变量隐藏”同时仍然保持对它的实时引用称为闭包。

注意：此实施方式尚不理想。例如，它不允许在同一页面中有两张滑动图片。实现这一点需要更大的复杂性，而不是原始问题的范围。

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

2 个答案: