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 );

这是我的 jquery 函数，用于在触发元素之前和之后添加一些 html 元素。

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

这是触发代码，我为带有 id "tags" 的输入字段触发它 我的 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 回答