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 を非表示にすることをお勧めします。ここでは、クラス「lang」をすべての div に追加し、「english」、「spanish」、「deutch」を特定の言語の div に追加しました。

于 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 に答える