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

请参阅test case on 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();
});

显示div取决于标志图像点击

3 个答案: