javascript - 从div访问js中的变量

Question

我正在玩一个网站，其中 8 个三 Angular 形组成一个八边形，当用户将鼠标悬停在每个三 Angular 形上时，它会从三 Angular 形中心移动 20px。目前我的 JS 看起来像这样:

//pushes out the top triangle
$('#top').hover(
    if($(this).css('moving'){
        function(){
            $(this).animate({top:"-=20px"}, 'slow');
        },
        function(){
            $(this).animate({top:"+=20px"}, 'slow');
        });
    }

但是我不想为每个三 Angular 形输入 -20px。我实际上在想，如果每个 div 存储它需要移动的方向，那么代码可能如下所示:

$(document).ready(function(){

//pushes out the triangle the user is hovering over
$(this).hover(  
        function(){
        $(this).animate({top: this.up}, speed);
                    $(this).animate({right: this.right}, speed);
    },
            function(){
                $(this).animate({top: this.down}, speed);
                    $(this).animate({right: this.left}, speed);
    }
);}

每个 div 都有向上、向下、向左和向右变量。例如，顶部三 Angular 形的值是:

top.up= "-=20px"
top.down= "+=20px"
top.left= "+=0px"
top.right= "+=0px"

编辑:进行下面建议的更改后，这是我的代码:

$(document).ready(function(){
//  if(stationary){
//      stationary=false;
    $("div").hover(
        function(){
            $(this).animate({top: this.data('up') }, "slow");
            $(this).animate({right: this.data('right') }, speed);
        }
    ),
        function(){
            $(this).animate({top: this.data('down') }, speed);
            $(this).animate({right: this.data('left') }, speed);
//              stationary=true;
        }
    );

}

这不会移动 div。另外，我还添加了 varstationary，以便只有当前没有 div 移动时 div 才能移动。

Answer 1

嗯，

您可以使用data属性:

<div data-top-up="-=20px"></div>

像这样使用它:

.animate({top: this.data('top-up') }, speed)