Question

我正在尝试创建一个jQuery插件，它将增加和减少变量（不是元素的值！）。这样可行，但是多个实例正在递增相同的变量，并且不会为每个实例创建一个孤立的值这是我的代码：

(function( $ )
{

var current_value = 5;
var maxs = 10;
var container_id;

$.fn.moveLeft = function(container_id){
    return this.each(function()
    {
        if (current_value+1 <= maxs)
            {
            current_value++;
            $("#"+container_id).animate({
                marginLeft: "-=194px",
                },200);

            }
    });
    }
$.fn.moveRight = function(container_id){
    return this.each(function()
    {
        if (current_value-1 >= 1)
            {
            current_value--;
            $("#"+container_id).animate({
                marginLeft: "+=194px",
                },200);
            }
    });
    }

})(jQuery);

html部分：

<div id="back" onclick="$('#back').moveLeft('s1');" >BACK</div><div id="fward" onclick="$('#fward').moveRight('s1');" >FWARD</div>
<div id="s1">SOME CONTENT 1</div>

<div id="back2" onclick="$('#back2').moveLeft('s2');" >BACK</div><div id="fward2" onclick="$('#fward2').moveRight('s2');" >FWARD</div>
<div id="s2">SOME CONTENT 2</div>

我需要的是为每个实例单独current_value。有人可以指导我吗？我是jQuery的新手......

Answer 1

根据Plugin Authoring文档，您可以使用.data()来存储状态。

$.fn.moveLeft = function(container_id) {
    return this.each(function() {
        var $this = $(this), moveLeftValue = $this
            .data('moveLeftValue')
            || 5;

        if (moveLeftValue < maxs) {
            $("#" + container_id).animate({
                        marginLeft : "-=194px"
                    }, 200);
            $this.data('moveLeftValue', moveLeftValue + 1);
        }
    });
}

jQuery插件里面有增量变量的多个实例

1 个答案: