Question

我正在制作不同语言的模板。

关于模板：将会显示某些DIV，其他DIV根据语言而变化。

我创建了一个jsFiddle example witch works as I need，但我很肯定这不是一个正确的方法......

$( "span.es" ).click(function() {
  $( "div#es" ).fadeIn()
  $("div#en").fadeOut()
  $("div#de").fadeOut();
});
$( "span.en" ).click(function() {
  $("div#en").fadeIn()
  $("div#es").fadeOut()
  $("div#de").fadeOut();
});
$( "span.de" ).click(function() {
  $("div#de").fadeIn()
  $("div#es").fadeOut()
  $("div#en").fadeOut();
});

有人能给我看一个简化版吗？

Pd积。模板上的内容不会一个接一个地出现，它将在不同的地方使用按钮，语言类将在点击事件中更改。

我希望自己解释一下！如果没有，抱歉！

在图片中您可以看到布局，红色内容将包含不同的语言 Template layout with multiple languages

Answer 1

尝试

<div class="buttons">
    <ul>
        <li>
            <span class="en lan" target="en">English</span>
        </li>
        <li>
            <span class="es lan" target="es">Español</span>
        </li>
        <li>
            <span class="de lan" target="de">Deutch</span>
        </li>
    </ul>
</div>
<div id="container">
    <div class="en">
        Content EN
    </div>
    <div class="es hidden">
        Content ES
    </div>
    <div class="de hidden">
        Content DE 1
    </div>
    <div class="de hidden">
        Content DE 2
    </div>
</div>

然后

var $lans = $('#container > div');
$( "span.lan" ).click(function() {
    var $target = $lans.filter('.' + $(this).attr('target'));
    $lans.not($target).fadeOut();
    $target.fadeIn()
});

演示：Fiddle

Answer 2

试试这个：http://jsfiddle.net/ninty9notout/7Yp74/

您应用这些课程：

lang lang-en或lang lang-es或lang lang-de到您要切换的面板。

单击按钮时，使用.lang作为选择器隐藏所有面板，然后根据点击的按钮，使用.lang-en，.lang-es或.lang-de显示所选的一个。

希望有道理：）

Answer 3

缓存项目，仅指定一个onclick事件，使用hasClass确定相关的类：

var $es = $("#es"),
    $en = $("#en"),
    $de = $("#de");

$( "span" ).click(function() {
    if($(this).hasClass('es')){
        $es.fadeIn();
        $en.fadeOut();
        $de.fadeOut();
    } else if($(this).hasClass('en')){
        $en.fadeIn();
        $es.fadeOut();
        $de.fadeOut();
    } else {
        $de.fadeIn();
        $es.fadeOut();
        $en.fadeOut();
    }
});

或者甚至更好，给他们所有其他类countryClick并执行此操作：

$( "span" ).click(function() {
    var $id = $(this).attr('class').split(' '); // gets first class, es for example

    $('#'+$id[0]).fadeIn();
    $('.countryClick').not('#'+$id[0]).fadeOut();
});

Answer 4

你可以尝试这样的事情。虽然我相信也有更好的方法可以做到这一点。

$('span').click(function () {
    var spanClass = $(this).attr('class');
    $('#container div:not(#' + spanClass + ')').fadeOut();
    $('#container div#' + spanClass).fadeIn();
    //$('#container div#' + spanClass).fadeIn();
})

Answer 5

我把代码放在这里

http://jsfiddle.net/N3pPM/3/

$( "span.es" ).click(function() {
    $("div.lang").fadeOut()
    $( "div.english" ).fadeIn()
  });
$( "span.en" ).click(function() {
    $("div.lang").fadeOut()
    $("div.spanish").fadeIn()
});
$( "span.de" ).click(function() {
    $("div.lang").fadeOut()
    $("div.deutch").fadeIn()
});

如果您想通过提供公共类名来隐藏一组div，这是一个好主意然后隐藏根据此类名显示div。在这里，我为所有div添加了“lang”类，并为特定语言添加了“english”，“spanish”，“deutch”div。

Answer 6

我会使用以下方法，这样您就可以扩展和使用您将来选择的多种语言：

$('span').click(function() {
    var clicked = $(this).attr('class');
    $('#' + clicked).fadeIn(500,function() {
        $('#container div:not(#' + clicked + ')').fadeOut();
    });
});

这是小提琴：http://jsfiddle.net/N3pPM/5/

更新：查看截图布局后，您需要使用类，而不是ID，更新后的代码如下：

<强>的jQuery

$('span').click(function() {
    var clicked = $(this).attr('class');
    $('#container .' + clicked).fadeIn(500,function() {
        $('#container div:not(.' + clicked + ')').fadeOut();
    });
});

<强> HTML

<div class="buttons">
    <ul>
    <li>
        <span class="en">English</span>
    </li>
    <li>
        <span class="es">Español</span>
    </li>
    <li>
        <span class="de">Deutch</span>
    </li>
    </ul>
</div>
<div id="container">
    <div class="en">
        Content EN
    </div>
    <div class="es">
        Content ES
    </div>
    <div class="de">
       Content DE
    </div>
</div>

小提琴链接：http://jsfiddle.net/N3pPM/6/

隐藏具有相同类的所有DIV并显示其他DIV

6 个答案: