1

我有一个带有 9 个链接的图像精灵。在动态找出值并相应移动之后，我没有指示每个链接的值，而是尝试在 jQuery 中制作动画。

这是标记：

<div class="compass">
    <a class="north" href="#" alt="North">&nbsp;</a>
    <a class="east" href="#" alt="East">&nbsp;</a>
    <a class="south" href="#" alt="South">&nbsp;</a>
    <a class="west" href="#" alt="West">&nbsp;</a>
    <a class="northeast" href="#" alt="North East">&nbsp;</a>
    <a class="southeast" href="#" alt="South East">&nbsp;</a>
    <a class="southwest" href="#" alt="South West" >&nbsp;</a>
    <a class="northwest" href="#" alt="North West">&nbsp;</a>
</div>

和jQuery：

var westLeft = +2150;
var westTop = +350;
$(".compass a").click(function(){
    var target = $(this).attr('class');
    var destinationTop = target + 'Top';
    var destinationLeft = target + 'Left';
    $('.map').animate({
        top: destinationTop,
        left: destinationLeft
    }, 1000, 'swing', function(){
        //we're done!
    });
});

所以当我点击西链接时，我让destinationTop动态显示westTop，但不是westTop的实际值。与destinationLeft 相同。

非常感谢你。

4

2 回答 2

1

你基本上是这样做的：

$('.map').animate({
    top: 'eastTop',
    left: 'eastLeft'
}, 1000, 'swing');

这些不是远程有效值。如果要覆盖现有值：

$('.map').animate({
    top: '2150',
    left: '350'
}, 1000, 'swing');

如果要添加到现有值：

$('.map').animate({
    top: '+=2150',
    left: '+=350'
}, 1000, 'swing');

http://api.jquery.com/animate/#animation-properties

问题是，我没有这些值，因为它取决于用户点击的 9 个链接中的哪一个，这就是为什么我试图弄清楚如何编写一个变量来获取动画的值取决于链接（或链接的类）。这不仅仅是手动写入值。

好的，所以您想使用 in 的值target来识别变量。你可以用eval() (don't)来做到这一点；稍少邪恶的是括号符号。假设变量是窗口范围的，而不是本地的：

$(".compass a").click(function(){
    var target = $(this).attr('class');
    var destinationTop = window[target + 'Top'];
    var destinationLeft = window[target + 'Left'];
    $('.map').animate({
        top: destinationTop,
        left: destinationLeft
    }, 1000, 'swing', function(){
        //we're done!
    });
});

但是，最好将值放入字典中，并再次使用括号表示法：

var values = {
    westLeft: 2150,
    westTop: 350
};

$(".compass a").click(function(){
    var target = $(this).attr('class');
    var destinationTop = values[target + 'Top'];
    var destinationLeft = values[target + 'Left'];
    $('.map').animate({
        top: destinationTop,
        left: destinationLeft
    }, 1000, 'swing', function(){
        //we're done!
    });
});
于 2012-08-20T21:36:39.623 回答
1

您的值变为eastTop, eastLeft，它们不引用变量的名称，因为它们是字符串，您可以使用data=*属性代替，请尝试以下操作：

<div class="compass">
    <a data-top="2150" data-left="350" href="#" alt="North">&nbsp;</a>
    <a data-top="2150" data-left="350" href="#" alt="East">&nbsp;</a>
    <a data-top="2150" data-left="350" href="#" alt="South">&nbsp;</a>
    <a data-top="2150" data-left="350" href="#" alt="West">&nbsp;</a>
    <a class="northeast" href="#" alt="North East">&nbsp;</a>
    <a class="southeast" href="#" alt="South East">&nbsp;</a>
    <a class="southwest" href="#" alt="South West" >&nbsp;</a>
    <a class="northwest" href="#" alt="North West">&nbsp;</a>
</div>


$(".compass a").click(function(){
    var destinationTop = $(this).data('top');
    var destinationLeft = $(this).data('left');
    $('.map').animate({
        top: destinationTop,
        left: destinationLeft
    }, 1000, 'swing', function(){
        //we're done!
    });
});
于 2012-08-20T22:03:21.013 回答