如何在javascript中存儲dom元素的變量？

Question

我所擁有的是多個動態div，它們在單擊時會產生動畫效果，基本上，我想在單擊div時保存div的狀態，因此，如果再次單擊它，它會記住其處於什么狀態。現在我可以使用它了，但是如果我單擊firs div，它將更改所有div的全局狀態。 因此，如果我再單擊div 2，它什么也不做，因為它已經處於該狀態。 我必須單擊兩次才能正常工作。

在這里看到我的小提琴

  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()方法存儲相對於element的狀態：

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

小提琴

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);
    });