jquery - 根据单击的标志图像显示 div

Question

所以目前我有 4 个不同的标志，我想显示四个 div 之一。例如，如果我点击法国国旗，我想显示法语内容，并隐藏其他语言的 div 等。

目前我有四个标志，其 ID 为法语、德语、英语和荷兰语，当单击它们时，我会获得被单击的标志的 ID，并使用该名称来切换我想要显示的 div。

$("img").click(function () {
 var myClass = $(this).attr("id");

   $('div.' + myClass).toggle();

 });
});

div 的相关类也称为英语、荷兰语、德语和法语。

我遇到的问题是能够隐藏我没有点击的 div，因为我得到一个充满四个 div 的页面！

谢谢你。

Answer 1

如果这些类被称为固定然后被english, dutch, german and french调用

var $divs = $('.english, .dutch, .german, .french');
$("img").click(function () {
    var myClass = this.id;
    var $div = $('div.' + myClass).toggle();

    $divs.not($div).hide()

 });
});

另一个解决方案是添加另一个类，调用flag所有 4 个 div，就像<div class="flag english">...</div>那时一样

var $divs = $('.flag');
$("img").click(function () {
    var $div = $divs.filter('.' + this.id).toggle();
    $divs.not($div).hide()

 });
});

Answer 2

您基本上是在寻找一个简单的选项卡功能，所以我会重新考虑您的标记并使用类来定义标志和语言。像这样：

HTML

<div class="flag english" data-language="english">E</div>
<div class="flag dutch" data-language="dutch">D</div>
<div class="flag german" data-language="german">G</div>
<div class="flag french" data-language="french">F</div>

<article class="language english show">
    English content
</article>
<article class="language dutch">
    Nederlandse inhoud
</article >
<article class="language german">
    Deutsch Inhalt
</article>
<article class="language french">
    Contenu en français
</article>

JavaScript

var langs = $(".language");
var flags = $(".flag");
flags.on("click", function(e){
    var lang = $(this).data("language");
    langs.filter(".show").removeClass("show");
    langs.filter("." + lang).addClass("show");
});

请参阅jsFiddle 上的测试用例。

Answer 3

尝试这样的事情

<div class="english lang">...</div>
<div class="german lang">...</div>

$("img").click(function () {
   var myClass = $(this).attr("id");
   $('div.lang').hide();
   $('div.' + myClass).show();
});