0

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

关于模板的一些信息：总是会显示某些 DIV，而其他 DIV 会根据语言而变化。

我已经创建了一个jsFiddle 示例，女巫可以根据需要工作，但我很肯定这不是正确的方法......

$( "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 模板上的内容不会一个接一个，它会在不同的地方，使用按钮的语言类会在点击事件时改变。

我希望我自己解释！如果没有，对不起！

在图片中你可以看到一个布局，红色的内容将包含不同的语言 多种语言的模板布局

4

6 回答 6

4

尝试

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

演示：小提琴

于 2013-08-19T15:28:56.307 回答
1

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

您应用以下课程：

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

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

希望这是有道理的:)

于 2013-08-19T15:36:53.780 回答
0

缓存项目，并仅分配一个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();
});
于 2013-08-19T15:30:00.017 回答
0

你可以尝试这样的事情。尽管我确信也有更好的方法来做到这一点。

$('span').click(function () {
    var spanClass = $(this).attr('class');
    $('#container div:not(#' + spanClass + ')').fadeOut();
    $('#container div#' + spanClass).fadeIn();
    //$('#container div#' + spanClass).fadeIn();
})
于 2013-08-19T15:35:23.747 回答
0

我把代码放在这里

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”，在特定语言的 div 中添加了“english”、“spanish”、“deutch”类。

于 2013-08-19T15:37:33.117 回答
0

我将使用以下内容，这样您将来可以扩展和使用尽可能多的语言：

$('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/

于 2013-08-19T15:42:44.363 回答