根据单击的标志图像显示 div答案

【问题标题】：Showing a div depending on flag image clicked根据单击的标志图像显示 div
【发布时间】：2013-08-09 20:08:07
【问题描述】：

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

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

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

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

 });
});

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

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

谢谢。

【问题讨论】：

你的 HTML 是什么样的？也许为所有 div 添加一个额外的类，这样您就可以一次隐藏它们并只显示选定的一个。
如果没有 HTML，我们无法在不进行猜测或假设的情况下回答这个问题。请给我们看。理想情况下也显示live demo。基本概念是您应该尝试帮助我们来帮助您。

标签： jquery html

【解决方案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()

 });
});

【讨论】：

【解决方案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");
});

见test case on jsFiddle。

【讨论】：

【解决方案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();
});

【讨论】：