Question

我有一个带有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也是如此。

非常感谢。

Answer 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个链接中的哪一个，这就是为什么我要弄清楚如何编写一个抓住该值的变量的原因动画取决于链接（或链接的类）。这不仅仅是手动写入值。

好的，所以你想使用target中的值来识别变量。您可以使用eval() （不要）执行此操作bracket notation的邪恶略少。假设变量是窗口范围的，而不是本地的：

$(".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!
    });
});

Answer 2

您的值变为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!
    });
});

jQuery为几个变量的动态值设置动画

2 个答案: