1

私のスクリプトはこのように続きます

(function( $ ){
   $.fn.customize_box = function() {
   //get the element id from the handle
   var my_id = this.attr('id');
   //add some layout elements before to this input box
   $('<p>hello</p>').before('#' + my_id);
      alert(my_id);
   }; 

   })( jQuery );

これは、起動された要素の前後にいくつかの html 要素を追加するようにコード化された私の jquery 関数です。

$('#tags').customize_box();

これは起動コードです。ID「タグ」を持つ入力フィールドに対して起動します。私の HTML は次のようになっています。

<div class="ui-widget">
  <input id="tags" size="50"  value="sankar is playing"/>
</div>

問題は、関数で、ID を含む起動された要素のプロパティを取得し、ID を変数に保存することですが、コードでわかるように .before() を使用して html を書き込むことができず、アラートが正しく表示されることです。 、しかしHELLOはコンテンツに追加されていません。誰かがデバッグを手伝ってくれませんか?

4

2 に答える 2

3

まず、insertBeforeではなくを使用する必要がありますbefore。次に、 を使用してプラグインがインスタンス化されている要素のインスタンスを取得できるためthis、セレクターを連結する必要はありません。これを試して：

(function ($) {
    $.fn.customize_box = function () {
        var my_id = this.attr('id');

        $('<p>hello</p>').insertBefore(this);
        alert(my_id);
    };
})(jQuery);

フィドルの例

于 2013-10-08T09:25:59.667 に答える
0

少しずれているかもしれませんが、選択したすべての要素を関数で処理することをお勧めします。

(function ($) {
    $.fn.customize_box = function () {
        return this.each(function () {
        //get the element id from the handle
        var my_id = $(this).attr('id');
        //add some layout elements before to this input box
        $('<p>' + my_id+ '</p>').insertBefore(this);
        });
    };
})(jQuery);

したがって、複数の入力に対して呼び出すことができます。

$('input').customize_box();

HTML:

<div class="ui-widget">
    <input id="tags" size="50" value="sankar is playing" />
    <input id="tags1" size="50" value="sankar is playing" />
    <input id="tags2" size="50" value="sankar is playing" />
</div>
于 2013-10-08T10:45:07.940 に答える