如何在此脚本中淡入查询结果

Question

我正在创建一个国家/地区的虚拟地图，当您点击此图片中所示的点时，如下图所示。现在，一切正常，就像你点击一个红点，一个图像和相关区域的描述出现，当点击其他红点时，前一个点消失，一个新的点出现。完善！唯一的问题是，然后你从下拉表单中选择一个城镇/区域，它只会弹出红点，但我需要图像＆amp;描述也适用于所选城镇/区域。

以下是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
});

Answer 1

只需在列表中选择元素时触发元素上的点击事件

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

});

见工作demo

Answer 2

你需要在新出现的元素上触发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);
    }

});