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在新出现的元素上触发 a （第一个是明智的）

$('#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 回答