Question

我所拥有的是多个动态div，它们在点击时会生成动画，基本上我想在点击时保存div的状态，所以如果我再次点击它，它会记住它的状态。现在我拥有它工作，但如果我点击第一个div，它会改变所有div的全局状态。所以，如果我然后单击div 2，它什么都不做，因为它已经处于该状态。我必须点击它两次才能工作。

看我的小提琴here

  var next_move = "expand";
  $(".slide").click(function()
    {
        var css = {};
        if (next_move == "expand"){
            css = {
            right: '100px'
            };
            next_move = "shrink";
        } else {
            css = {
            right: '0px'
            };     
            next_move = "expand";
        }
        $(this).animate(css, 200);
    });

我假设我必须创建一个对象以保存属性。

Answer 1

使用data()方法存储相对于元素的状态：

$(".slide").click(function () {
    var expand = $(this).data('expand');
    $(this).animate({right: (expand?0:100)}, 200).data('expand', !expand);
});

FIDDLE

Answer 2

您可以使用另一个类来说明div是否已扩展

$( ".slide" ).click( function() {
    var css = {};
    if( $( this ).hasClass( "expanded" ) ) {
       css = {
                        right: '0px'
        };  

        $( this ).removeClass( "expanded" );
    } else {
        css = {
                        right: '100px'
        };

        $( this ).addClass( "expanded" );
    }

    $( this ).animate( css, 200 );
});

Answer 3

只需$(this)即可解决问题。您可以让data-attribute拥有当前状态。

var next_move = "expand";
        $(".slide").click(function()
    {
        var css = {};
        if ($(this).css('right') == "0px"){
            css = {
                            right: '100px'
            };
        } else {
            css = {
                            right: '0px'
            };     
        }
        $(this).animate(css, 200);
    });

如何在javascript中存储dom元素的变量？

3 个答案: