1

私は英語とスペイン語のサイトを持っており、サイトの各ページにはその特定のページのスペイン語版につながるリンクがあるため、ユーザーが「home.php」ページにいた場合、それはこのような：

<div id="language">
    <ul class="language">
        <li class="english"><a href="#" class="active" title="English"></a></li>
        <li class="divider"></li>
        <li class="spanish"><a href="inicio.php" class="notactive" title="Español"></a></li>
    </ul>
</div>

私がやりたいのは、HTML のタグの href とクラスを空白のままにして、ユーザーがいるページに応じて<a>、クラスと href URL をに割り当てることです。たとえば、それを追加するだけです。 <a>language div を外部ファイルに追加し、 を使用し<include>て各ページに添付します。これを達成するために、次のコードを使用しています。

$('ul.menubar a').each(function(){
    if(location.href.match('home.php')){
        $('ul.language li.english a').addClass('active');
        $('ul.language li.english a').append(function() {
            $(this).attr('onclick', 'return false;');
        });
        $('ul.language li.spanish a').addClass('notactive');
        $('ul.language a[href!="home.php"]').append(function() {
            $(this).attr('href', 'inicio.php');
        });
    }
}

問題は、サイトの英語版のナビゲーション バーに 4 つのリンク (home.php、services.php、aboutus.php、contact.php) があり、スペイン語版も同様 (対応する URL 名の翻訳付き) であることです。 . そのコードを 8 回 (リンクごとに 1 つ、各言語で 4 つのリンク) 繰り返さなければならないのは過剰であり、実際には HTML にクラスと href url を単に追加するよりも多くのコードを追加することになると思います。JS を使用するポイントは、物事を単純化することです。

だから私は基本的に誰かがこれを行うためのより良い方法を考えることができるかどうかを知りたい. 何かを変更する必要がある場合に、それぞれのページを編集する必要がないようにしています。また、これが JavaScript を使用してやりたいことを達成するための最良の方法であるかどうかを知りたいです。

4

1 に答える 1

1

HTMLは、コンテンツの管理に最適です。CSSはそのコンテンツの表示に最適であり、JavaScriptはそのコンテンツの動作を決定するのに最適です。リンクを挿入してJavaScriptからHTMLを制御しようとする代わりに; 代わりに、コンテンツをHTML内に残し、JavaScriptを使用して、ハイパーリンク自体のクラス値に基づいてアクションを実行する1つまたは2つのイベントハンドラーを定義します。

英語のハイパーリンクにクラスがあり、スペイン語のハイパーリンクに別のクラスがあるので、これを有利に使用できます。

クリックハンドラーの作成：

「言語スイッチ」を切り替えるとブール値が設定される可能性が高いため、2つのクリックハンドラーを使用して、すべての英語リンクとすべてのスペイン語リンクをターゲットにし、そのスイッチの値に基づいて動作を制御できます。リンクがクリックされた時間。

// handler for all English links
$('li.english a').click(function(event) {
    event.preventDefault();
    if(/* Switch is english */) {
        window.location = $(this).attr("href");
    } 
});

// handler for all Spanish links
$('li.spanish a').click(function() {
    event.preventDefault();
    if(/* Switch is SPANISH */) {
        window.location = $(this).attr("href");
    } 
});

リンクをクリックすると、最初にスイッチをチェックすることに注意してください。その値に応じて、そのハイパーリンクにリダイレクトするか、デフォルトの動作（新しいページに移動する）が完了しないようにします。

プレゼンテーションの処理：

ここで、もう1つの問題は、スペイン語のサイトと英語のサイトが同じであると仮定すると、合計8つのハイパーリンクが表示されることです。繰り返しになりますが、これはスイッチが便利な場所です。

// single handedly hide or display the relevant content, based on the switch
function switchToEnglish() {
    $('.english').show();
    $('.spanish').hide();
}

function switchToSpanish() {
    $('.spanish').show();
    $('.english').hide();
}

さて、あなたのスイッチ機能に他に何が含まれているのかわかりませんが、ここでの一般的な考え方は、コンテンツを変更する必要がないということです。コンテンツを表示および非表示にする必要があります。このような機能がまだない場合は、この概念を既存のスイッチ機能に統合する必要があります。

このアプローチにはいくつかの利点があります。

  • Webデザイナーは引き続きHTMLにhrefを表示し、ヘルプやJavaScriptコードを確認しなくても、HTMLを読んで理解することができます。彼らは見慣れたパターンを見るだけでなく、あなたは彼らとより良い関係を築くことができるでしょう。

  • あなたのサイトをスパイダリングしている検索エンジンは、リンクを読んでそれらをたどることができます。

  • JavaScriptを使用しないブラウザは、リンクを処理できます。一部の人々はこれを気にかけているようです。私はしません。しかし、とにかく言及する価値があります。

要約すると、HTMLでの管理が簡単であるというのは正しいことです。この手法を使用することで、当然のことながら懸念しているコードの繰り返しを排除し、コンテンツをHTMLに戻すことができます。これは、腸が正しいことを示しているためです。コードが読みやすくなるだけでなく、SEOの結果も向上します。

于 2012-05-17T03:20:37.347 に答える