0

下の写真のようにドットをクリックすると、国の仮想地図を作成しています。これで、赤い点をクリックすると、関連する領域に関する画像と説明が表示され、他の赤い点をクリックすると、前の点が消えて新しい点が表示されるなど、すべてが正常に機能します。完全！唯一の問題は、ドロップダウンフォームから町/ゾーンを選択すると、赤い点がポップアップするだけですが、選択した町/ゾーンの画像と説明も表示される必要があります。

これがjsFiddleです

問題を知るには、最初に赤い点をクリックしてから、画像/説明のポップアップが表示されたら、ドロップダウンメニューから任意のゾーンを選択します。点は表示されますが、説明/ゾーンを自動的に選択しても、画像は変更されません。

助けてくれてありがとう

ここに画像の説明を入力してください

これがJSコードです。サイトではjsFiddleリンクのみを投稿できないため、以下に示します。

JS

$(document).ready(function() {
// begin Ready

    //...................................................
    // When the form changes
    $('#mapForm').change(function() {

        var selectedContinent = $('#mapForm option:selected').val();
        if (selectedContinent == 'ALL'){
            $('a.dot').slideDown(1000);

        }else{
            $('a.dot[continent = "'+selectedContinent+'"]').slideDown(1000);
            $('a.dot[continent != "'+selectedContinent+'"]').slideUp(1000);
            $('a.dott[continent = "'+selectedContinent+'"]').slideDown(1000);
            $('a.dott[continent != "'+selectedContinent+'"]').slideUp(1000);
        }

    });

    $('#mapFormm').change(function() {

        var selectedContinentt = $('#mapFormm option:selected').val();
        if (selectedContinentt == 'ALL'){

            $('a.dott').slideDown(1000);
        }else{
            $('a.dot[continent = "'+selectedContinentt+'"]').slideDown(1000);
            $('a.dot[continent != "'+selectedContinentt+'"]').slideUp(1000);
            $('a.dott[continent = "'+selectedContinentt+'"]').slideDown(1000);
            $('a.dott[continent != "'+selectedContinentt+'"]').slideUp(1000);
        }

    });

    // When a dot is clicked
    //...................................................
    $('a.dot').click(function(){

        $('a.dot').removeClass('selected');
        $(this).addClass('selected');

        var city = '.city_detail#' + $(this).attr('city');
        var htmlCode = $(city).html();

        $('.detail_container').fadeOut(500, function(){
            $('.detail_container .city_detail').html(htmlCode);
            $('.detail_container').fadeIn(500);
        });

    });
    $('a.dott').click(function(){

        $('a.dott').removeClass('selected');
        $(this).addClass('selected');

        var city = '.city_detail#' + $(this).attr('city');
        var htmlCode = $(city).html();

        $('.detail_container').fadeOut(500, function(){
            $('.detail_container .city_detail').html(htmlCode);
            $('.detail_container').fadeIn(500);
        });

    });

// end Ready
});
4

2 に答える 2

2

リストで要素を選択しているときに、要素のクリックイベントをトリガーするだけです

// When the form changes
$('#mapForm').change(function() {

    var selectedContinent = $('#mapForm option:selected').val();
    if (selectedContinent == 'ALL'){
        $('a.dot').slideDown(1000);

    }else{
        $('a.dot[continent = "'+selectedContinent+'"]').slideDown(1000, function(){$(this).trigger('click');});
        $('a.dot[continent != "'+selectedContinent+'"]').slideUp(1000);
        $('a.dott[continent = "'+selectedContinent+'"]').slideDown(1000, function(){$(this).trigger('click');});
        $('a.dott[continent != "'+selectedContinent+'"]').slideUp(1000);
    }

});

$('#mapFormm').change(function() {

    var selectedContinentt = $('#mapFormm option:selected').val();
    if (selectedContinentt == 'ALL'){

        $('a.dott').slideDown(1000);
    }else{
        $('a.dot[continent = "'+selectedContinentt+'"]').slideDown(1000, function(){$(this).trigger('click');});
        $('a.dot[continent != "'+selectedContinentt+'"]').slideUp(1000);
        $('a.dott[continent = "'+selectedContinentt+'"]').slideDown(1000, function(){$(this).trigger('click');});
        $('a.dott[continent != "'+selectedContinentt+'"]').slideUp(1000);
    }

});

実際のデモを見る

于 2012-12-10T18:51:03.097 に答える
1

click新しく出現した要素でトリガーする必要があります（最初の要素が賢明です）

$('#mapForm').change(function() {
    var selectedContinent = $('#mapForm option:selected').val();
    if (selectedContinent == 'ALL'){
        $('a.dot').slideDown(1000);

    }else{
        $('a.dot[continent = "'+selectedContinent+'"]').slideDown(1000).first().click();
        $('a.dot[continent != "'+selectedContinent+'"]').slideUp(1000);
        $('a.dott[continent = "'+selectedContinent+'"]').slideDown(1000);
        $('a.dott[continent != "'+selectedContinent+'"]').slideUp(1000);
    }

});

$('#mapFormm').change(function() {

    var selectedContinentt = $('#mapFormm option:selected').val();
    if (selectedContinentt == 'ALL'){

        $('a.dott').slideDown(1000);
    }else{
        $('a.dot[continent = "'+selectedContinentt+'"]').slideDown(1000).first().click();
        $('a.dot[continent != "'+selectedContinentt+'"]').slideUp(1000);
        $('a.dott[continent = "'+selectedContinentt+'"]').slideDown(1000);
        $('a.dott[continent != "'+selectedContinentt+'"]').slideUp(1000);
    }

});
于 2012-12-10T18:49:32.580 に答える