1

我正在尝试制作一个 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 的新手...

4

1 回答 1

1

根据插件创作文档，您可以使用.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);
        }
    });
}
于 2013-04-09T13:35:32.630 回答