Question

您好我是使用jQuery编写插件的新手，目前正面临着局部变量处理的案例，

以下是所有参考的一些代码

    <div class="apple"></div>
    <div class="apple"></div>
    <script>
    var apple = [1,3];

    $(function(){
        $.fn.Hello = function(){

           return this.each(function(){
             var apple = 0;
             $.fn.extend({

                 setApples:function(num_of_apples){
                     apple = num_of_apples
                 },
                 getApples:function(){
                      return apple;
                 }
             });
           });
        }


        var i = 0;
        var $apples = $('.apple').Hello(); 
        $apples.each(function(){
            console.log(apple[i]);
            $(this).setApples(apple[i]);
            i++;
        });

        var j = 0;
        $('.apple').each(function(){

            console.log("Apple "+j+":"+$(this).getApples());
            j++;
        });
    });
    </script>

我希望结果如此 Apple 0：1 Apple 1：3

但是最后一个设置将始终覆盖最后一个结果。实际结果： Apple 0：3 Apple 1：3

我尝试将变量从apple更改为this.apple，但它会返回未定义的结果。我可以知道代码中的错误部分吗？

我尝试从谷歌搜索，还有另一种选择，使用$(this).data('apple',value)进行设置，$(this).data('apple')获取值，但因为我想对苹果的数量进行一些计算，例如apple ++，通过这种方法获取和设置将会很繁琐

例如$(this).data('apple',$(this).data('apple')+1);，所以想问一下这个案例是否还有其他选择，谢谢。

Answer 1

即使您执行了this.apple，您仍然可以从apple数组中获取最后一项。这是因为您将使用原型来存储在所有jQuery对象之间共享的apple的值。 E.g

$.fn.extend({
            apples:0,
            setApples:function(num_of_apples){
                 this.apples = num_of_apples
             },
             getApples:function(){
                  return this.apples;
             }
         });

如果你想为每个元素存储一个值，快速的方法是将它实际存储在元素上，但是使用你的扩展方法来抓取它。

 $.fn.Hello = function(){
       return this.each(function(){
         $.fn.extend({
             setApples:function(num_of_apples){
                 this.data("apple", num_of_apples)
             },
             getApples:function(){
                  return parseInt(this.data("apple"));
             }
         });
       });
    }

您可以添加检查以确保将其编号传递到setApples函数，但现在这应该可行。

另外作为旁注，你可以改善你的循环

var i = 0;

$.each(function(){
    i++
});

你可以使用

$.each(function(index){
// use index here. 
}

这是它的文档：https://api.jquery.com/each/

这里也是苹果问题的一个工作示例：https://jsfiddle.net/y27tn5wg/

关于在编写插件时存储局部变量的jquery

1 个答案: