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

そのため、west リンクをクリックすると、destinationTop が動的に westTop を表示するようになりましたが、westTop の実際の値は表示されませんでした。destinationLeft についても同様です。

どうもありがとうございました。

4

2 に答える 2

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 に答える
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て変数を識別します。(don't) ;でこれを行うことができます。弱悪はブラケット表記。変数はウィンドウ スコープであり、ローカルではないと仮定します。eval() 

$(".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 に答える