1

要素を青色に変える、この本当にエキサイティングな jQuery プラグインを作成しました。 http://jsfiddle.net/LpCav/

現在ページにない要素に適用したいと考えています。

新しい要素をページに追加した直後に適用するという選択肢があることは理解しています。もう 1 つのオプションは、新しい要素を作成する代わりに、既存の要素の 1 つを複製してページに追加することです。これらのオプションのいずれも実行したくありません。

<li>代わりに、 on() を使用して、内部の現在または将来の要素に適用できます<ul id="myNewList">か?

そうでない場合、この動作を実行するようにプラグインを変更できますか?

ありがとう

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> 
        <title>Future</title>  
        <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> 
        <script type="text/javascript">
            (function( $ ){
                $.fn.makeBlue = function() {  
                    return this.each(function() {
                        $(this).css('color','blue');
                    });
                };
            })( jQuery );

            $(function(){
                $('.myElement').makeBlue();
                $('#add').click(function(){
                    $('#myNewList').html('<li class="myElement">hello</li>')
                });
            });
        </script>
    </head>

    <body>
        <button id="add">Add</button>
        <ul id="myList">
            <li class="myElement">hello</li>
            <li class="myElement">hello</li>
        </ul>
        <ul id="myNewList">
        </ul>
    </body> 
</html>
4

3 に答える 3

1

最も簡単な (そしておそらく最も一般的な解決策) を破棄したため、「DOM が変更されました」イベントをキャッチしてそれにバインドする必要があります。私が見つけたものから、いくつかのイベントがありますが、サポートが非常に不十分です..簡単に言えば、必要なものを提供するライブラリは次のとおりです。

https://github.com/joelpurra/jquery-mutation-summary

于 2013-03-20T13:22:17.853 に答える
0

通常、$(document).ready(...)ブロックを使用して、ページの読み込みごとにコードが呼び出されるようにします (ajax コールバックでも)。ただし、プラグインをべき等プラグインとして実装する必要があります。同じ要素を複数回呼び出しても同じ結果が得られるはずです。

既存の jquery プラグインと組み込みプラグインの経験から、次のことがわかりました。

  • 同じ要素に対して同じ構成で同じプラグインが複数回呼び出された場合、後続の呼び出しでは目に見える違いは生じません。

  • 同じ要素の異なる構成で同じプラグインが呼び出された場合、構成が以前の呼び出しの 1 つとマージされるという効果があります。

おそらく、プラグインでこの動作に固執する場合、既存の動作と一貫性があり、シナリオで動作させることができます$(document).ready

必要に応じて対応する要素を更新するため、使用.on(...)するとさらに良い場合があります。<ul>それでも、リスト項目が既に存在する場合、プラグインはそれらを冪等に処理する必要があります。

編集：

コードの冪等性の問題については、次のようになります。

$.fn.makeBlue = function() {  
    return this.each(function() {
        var elem = $(this);
        if (elem.css('color') != 'blue') {
            // it is likely for the element not to have been processed yet.
            elem.css('color','blue');
        }
    });
};

より良い解決策は、既に処理された要素にカスタム css クラスを追加することです。プラグインがアクセスしたことをマークするだけです。次に、代わりに確認できます$(this).hasClass('?')。これは次のようになります。

$.fn.makeBlue = function() {  
    return this.each(function() {
        var elem = $(this);
        if (!elem.hasClass('makeBlueCalled')) {
            elem.css('color','blue');
            elem.addClass('makeBlueCalled');
        }
    });
};

あなたのプラグインで、唯一の目的がテキストの色付けである場合は、css 定義を使用することをお勧めします

ul.myList > li.myElement.makeBlueCalled { color: blue !important; }

行を完全に削除elem.css('color','blue');します。

于 2013-03-20T13:15:40.307 に答える
0

DOM ツリーへの変更をキャッチするための DOM2 の「変異イベント」がありますが、それらは十分にサポートされておらず、実際には W3C によって廃止されています。新しい「ミューテーション オブザーバー」イベントがありますが、それらは DOM4 にあり、完全にはサポートされていません。それらの詳細については、この質問を参照してください。

いずれにせよ (しゃれは意図していません) 事実は、JS はシングルスレッド言語であり、そこに配置しない限り要素をページに表示できないため、通常、挿入時に必要な変更を加えるのは簡単です。

それ以外の場合、この特定の例に対する正しい答えは、これを CSS スタイル シートに入れることです。

.myElement {
    color: blue;
}

スタイルを適用するよりも複雑なことを実際に行っている場合、唯一の移植可能なオプションは、要素が存在することを知ってからプラグインを呼び出すことです。

于 2013-03-20T13:16:31.810 に答える