0

<map>15個の<area>タグが定義されたタグを使用してロンドンのインタラクティブマップを作成しました。15のエリアのいずれかをクリックすると、クリックされたエリアに応じて、マップのソースが別のエリアに置き換えられます。すべてのエリアには個別のIDがあり、ソースはそのIDに従って変更されます。

エリアをもう一度クリックすると、マップ画像が元のソースに戻ります。

このための簡略化されたHTMLは、次のようになります。

<IMG id="londonmap" SRC="images/londonmap.png" USEMAP="#london">
<map name="london">
<area id="dalston" href="#" shape="rect" coords="364,75,500,200"
      alt="Dalston Tube Stop" title="Dalston Area">
</map>

クリックとクリック解除に使用したjQueryは次のようになります。

$(document).ready(function()
{
    $('#dalston').click(function()
    {
        // select the image and determine what the next src will be
        var londonMap = $('#londonmap');
        var newImageSrc = londonMap.attr('src') != 'images/dalstonmap.png' ? 'images/dalstonmap.png' : 'images/londonmap.png';

        // re-bind the src attribute
        londonMap.attr('src', newImageSrc);
    });
 });

ここまではすべて問題なく動作します。.fadeToggle()さて、スムーズな移行のためにクリックしたときに画像が変化するので、コードを次のように変更すると、少し余分な効果が得られるといいと思いました。

$(document).ready(function()
{
$('#dalston').click(function() {
    $('#londonmap').fadeToggle('slow', function()
    {
        // select the image and determine what the next src will be
        var londonMap = $('#londonmap');
        var newImageSrc = londonMap.attr('src') != 'images/dalstonmap.png' ? 'images/dalstonmap.png' : 'images/londonmap.png';

        // re-bind the src attribute
        londonMap.attr('src', newImageSrc);
    });
     });
 });

現在の問題は、コードの半分だけが期待どおりに反応することです。元の画像はフェードアウトしますが、2番目の画像はその代わりになりません。イベントが発生する順序と関係があると思いますが、jQueryの初心者であるため、何が問題になっているのか実際にはわかりません。

これが私が地図を完成させるのを妨げる最後のことなので、どんな助けでも大歓迎です！

4

3 に答える 3

1

関数を使用してフェードした要素を実際に表示することはありませんfadeToggle。画像が交換されたら、それを表示する必要があります。

アップデート

$(document).ready(function()
{
$('#dalston').click(function() {
    $('#londonmap').fadeOut('slow', function() {
        // select the image and determine what the next src will be
        var londonMap = $('#londonmap');
        var newImageSrc = londonMap.attr('src') != 'images/dalstonmap.png' ? 'images/dalstonmap.png' : 'images/londonmap.png';

        // re-bind the src attribute
        londonMap.attr('src', newImageSrc);
        $('#londonmap').fadeIn('slow');
        });
    });
});

または、ここで実際の例を確認してください。

于 2012-05-23T14:28:38.210 に答える
0

試す：

$(document).ready(function()
{
$('#dalston').click(function() {
    $('#londonmap').fadeToggle('slow', function()
    {
        // select the image and determine what the next src will be
        var londonMap = $('#londonmap');
        var newImageSrc = londonMap.attr('src') != 'images/dalstonmap.png' ? 'images/dalstonmap.png' : 'images/londonmap.png';

        // re-bind the src attribute
        londonMap.attr('src', newImageSrc);
        //show the image
        $('#londonmap').fadeToggle('slow');
    });
     });
 });
于 2012-05-23T14:25:52.683 に答える
0

トグルを逆にするように指示していません。これを試してください

$(document).ready(function() {

    $('#dalston').click(function() {

        $('#londonmap').fadeToggle('slow', function() {

            // select the image and determine what the next src will be
            var newImageSrc = $(this).attr('src') != 'images/dalstonmap.png' ? 'images/dalstonmap.png' : 'images/londonmap.png';

            // re-bind the src attribute and fade back in
            $(this).attr('src', newImageSrc).fadeToggle('slow');
        });
    });
});
于 2012-05-23T14:33:56.017 に答える