使用jQuery显示和隐藏交互式地图上的元素

我正在使用一些jquery制作一个简单的交互式地图，但我不确定如何正确地进行

我在地图上有一个旗帜列表，当用户点击一个旗帜（即法国）时，一个特色的帖子缩略图将出现在一个div（法国div）中，如果他们再次点击它，它将消失。我的问题是，当“法国”分区显示时，我点击一个新的国旗，即巴西，我不能用“巴西”分区替换“法国”分区

jQuery：

$(document).ready(function() {
    $('.france-posts').hide();
    $('#france_flag').click(function() {
        $('.france-posts').fadeIn(1000);
    });

    $('.brazil-posts').hide();
    $('#brazil_flag').click(function() {
        $('.laos-posts').fadeIn(1000);
    });

    $('.ireland-posts').hide();
    $('#ireland_flag').click(function() {
        $('.laos-posts').fadeIn(1000);
    });
});

HTML:

抱歉，这有点含糊

---

感谢您的帮助

如果我正确理解了您的问题，您希望在单击新帖子时隐藏其他帖子。因此，您可以：

$(document).ready(function() {
    $('.france-posts').hide();
    $('#france_flag').click(function() {
        $('[class$=posts]').hide();
        $('.france-posts').fadeIn(1000);
    });

    $('.brazil-posts').hide();
    $('#brazil_flag').click(function() {
        $('[class$=posts]').hide();
        $('.laos-posts').fadeIn(1000);
    });

    $('.ireland-posts').hide();
    $('#ireland_flag').click(function() {
        $('[class$=posts]').hide();
        $('.laos-posts').fadeIn(1000);
    });
});

此行将隐藏其类以“posts”结尾的所有div，从外观上看，这些div将适用于您->

$（“[class$=posts]”）。hide（）

还有其他更好的方法来处理这个问题，例如使用
posts
和
flags
类，并使用数据对象跟踪正在单击的元素，这将有助于减少代码，但以上是快速解决方案

如果您希望旧标志淡出，只需将
hide（）
更改为
fadeOut（）
谢谢我将其用于此代码：

$(document).ready(function() {
$('.laos-posts').hide();
$('#laos_flag').click(function() {
    $('.selected').fadeOut();
    $('.laos-posts').fadeIn(1000);
    $('.laos-posts').addClass("selected");
});

$('.vietnam-posts').hide();
$('#vietnam_flag').click(function() {
    $('.selected').fadeOut();
    $('.vietnam-posts').fadeIn(1000);
    $('.vietnam-posts').addClass("selected");
});

$('.indonesia-posts').hide();
$('#indonesia_flag').click(function() {
    $('.selected').fadeOut();
    $('.indonesia-posts').fadeIn(1000);
    $('.indonesia-posts').addClass("selected");
   });
});

嗨，埃文，非常感谢你帮助我！我让它与以下代码一起工作。
$(document).ready(function() {
$('.laos-posts').hide();
$('#laos_flag').click(function() {
    $('.selected').fadeOut();
    $('.laos-posts').fadeIn(1000);
    $('.laos-posts').addClass("selected");
});

$('.vietnam-posts').hide();
$('#vietnam_flag').click(function() {
    $('.selected').fadeOut();
    $('.vietnam-posts').fadeIn(1000);
    $('.vietnam-posts').addClass("selected");
});

$('.indonesia-posts').hide();
$('#indonesia_flag').click(function() {
    $('.selected').fadeOut();
    $('.indonesia-posts').fadeIn(1000);
    $('.indonesia-posts').addClass("selected");
   });
});