0

我将为 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>
4

2 回答 2

2

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

于 2013-07-10T14:33:31.147 回答
0

当你命名一个参数 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);

通过这种方式，您可以将计数器的范围限制为局部变量。这种“变量隐藏”同时仍然保持对它的实时引用称为闭包。

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

于 2013-07-10T14:43:13.297 回答