0

私の関数をすべてのdivに追加するのを手伝ってください。「それぞれ」を使いたいのですが、方法がわかりません。

$('div').test() 関数を使用しようとすると、2 つの警告メッセージが必要ですが、最初の div のみになります。それはまだ動作します。

<html>
    <head>

        <style type="text/css">
            div {
                width:100px;
                height:100px;
                background: yellow;
                float: left;
                margin: 20px;
            }
        </style>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

    </head>

    <body>

        <div id="a"></div>
        <div id="b"></div>

        <script type="text/javascript">

            (function( $ ){

                $.fn.test = function() {

                    alert(this.attr('id'));

                };

            })( jQuery );

            //work
            $('#a').test();

            // not work
            //$('div').test();

        </script>
    </body>
</html>

ありがとう！

4

4 に答える 4

3

アラートラインを次のように変更します。

return this.each(function(){ alert(this.id); });

それぞれのjQueryのドキュメントを参照してください。

これがJSFiddleです。

于 2012-11-22T21:30:22.000 に答える
2

http://jsfiddle.net/bu952/1/

(function( $ ){

  $.fn.test = function() {

    return this.each(function() {
      alert(this.id);
    });

  };
})( jQuery );


$('div').test();
于 2012-11-22T21:31:14.223 に答える
1

あなたの最初の例...

$('#a').test();

...IDが「a」の要素が1つしかないため機能します。ただし、2番目の例は...

$("div").test();

...ページ上のすべてのdivを選択しているためではありません。

両方の可能性をサポートするには、次のようなものが必要になります。

(function($){
    $.fn.test = function() {
        // this is now all selected elements.
        // Loop through each selected element.
        $(this).each(function() {
            // this is now the element being looped.
            alert($(this).attr('id'));
        });
    };
})(jQuery);

jsFiddle： http: //jsfiddle.net/2Ejux/

于 2012-11-22T21:30:44.860 に答える
0

あなたが得た答えはあなたのケースで働いています。プラグインのオーサリングに向かう場合は、これらを読むことをお勧めします。プラグイン パターンのいずれかを使用すると、投稿した問題が発生するのを防ぐことができます。

http://docs.jquery.com/Plugins/Authoring - プラグインのヒントと基本構造が記載されています

http://stefangabos.ro/jquery/jquery-plugin-boilerplate-oop/ - 強力なプラグイン構造

http://stefangabos.ro/jquery/jquery-plugin-boilerplate-revisited/ - 上記の古いバージョン

于 2012-11-22T21:47:29.007 に答える