1

そのため、サイトのプロパティを変更する方法を思いついたのですが、私の方法を改善する方法があるかどうか疑問に思っています。目的は、クライアントが cms ツールを使用して、繰り返されるヘッダー、お礼のメッセージ、会社名など、サイト上の共通の値を更新できる 1 つの html ファイルを作成することです。Javascript を使用してこれを達成したいと考えています。

var spSelectResultsTxt = $("#sp .selectResultsTxt");
$(".main-content .selectResultsTxt").text(spSelectResultsTxt.text());​

アクティブなフィドルはこちら http://jsfiddle.net/trobbins26/VwtWD/4/

このスクリプトは、1 つの div (クライアントが cms で更新する) からのテキスト値をサイト内のページのクラスに渡します。唯一の問題は、サイトに存在する可能性のあるすべてのプロパティに対して var を作成したくないことです。

私のスクリプトで [#sp .class が .main-content .class と一致する場合、#sp .class 内のテキストを .main-content .class 内のテキストとして適用する] と言う方法はありますか? 基本的に、作成するすべてのプロパティに適用できる 1 つのルールを作成します。

どんなフィードバックも役に立ちます。

4

2 に答える 2

2

これはトリックを行います：

HTML:

<!-- Represents html file that will be updated in a cms by client -->
<!-- To be included on each page of site -->
<div id="sp" style="display:none;">
    <span data-target=".main-content .selectResultsTxt">
        Select an option to see results for a specific year.    
    </span>
    <div data-target="#otherText">Some other text.</div>
</div>


<!-- represents page to apply rule -->
<div class="main-content">
    <h4><span class="selectResultsTxt"></span> testing...</h4>
    <p><span id="otherText"></span></p>
</div>

Javascript:

$('#sp').children().each(function() {
    $($(this).data().target).text($(this).text());
});

ここでフィドルを更新しました: http://jsfiddle.net/VwtWD/7/ </p>

説明：

の子要素をループしてから、div.spそのクラスとテキストにアクセスし、ページ上で一致する要素を探して更新します。

私はいくつかの改善を行いました：

ターゲット要素を識別するためのクラスを残し、ユーザーが入力したテキストを格納する要素でデータ バインディングを使用することをお勧めします。.data()上記の私のソリューションのように、jQuery 関数を介して簡単にアクセスできます。

また、各要素の完全な CSS パスを指定できると、ソリューションをより複雑なページに拡張できるようになると便利です。

個人的には、クライアントがタグまたはまたはなど.html()を使用したい場合に備えて、テキストだけでなくhtmlを設定するメソッドも使用します。例：<br><em><img>

$('#sp').children().each(function() {
    $($(this).data().target).html($(this).html());
});

その他のフィードバック:

これを実現するためにクライアント側の JavaScript を使用している理由はありますか? サーバー側でそれをかなり簡単に行うことができます（node.jsを使用したjavascriptでも）。これには、次のような多くの利点があります-GoogleなどはSEOの問題であるコンテンツを表示しません-javascriptを使用しないブラウザーが勝ちましたコンテンツが表示されない (確かに、これは非常に少数であるため、問題にはならないかもしれませんが、指摘する価値はあります)

とにかく、クイックハックソリューションとして、それは機能します.

于 2012-10-25T04:47:07.837 に答える
0

このようなものは、あなたが望むことをするはずです。クラスを持つすべての要素を順番にループします。要素に複数のクラスがある場合、すべて同じクラスを持つ要素と一致します。重複はフィルタリングされないため、要素が複数回一致した場合、最後の一致によって以前の一致が上書きされます。

// save main element
var main = $( '.main-content' );

// for each element in #sp with a class
$( '#sp *[class]' ).each( function() {
    // get all the classes on the element, and make a jQuery selector from them
    var selector = '.' + this.getAttribute( 'class' ).replace( ' ', '.' );

    // find any matching elements in the main element, and set the text
    main.find( selector ).text( $( this ).text() );
});

編集: ここにデモがあります: http://jsfiddle.net/VwtWD/6/

于 2012-10-25T04:40:50.677 に答える