javascript - 在 jQuery 插件中获取集合

Question

基本上，我想做的是创建一个带有文本框、一些按钮和 jQuery 的 bbcode 编辑器。这是我的表格:

<div class="form-group">
    <div class="btn-group btn-group-sm">
        <button type="button" class="btn glyphicon bbcode" rel="bold"><b>B</b></button>
        <button type="button" class="btn glyphicon bbcode" rel="italic"><i>I</i></button>
    </div>

</div>
<div class="form-group">
    <textarea class="bbcode" rel="editor" cols="100" rows="12"></textarea>
</div>

我的插件被调用使用:

<script>
    $('document').ready(function() {
        $('.bbcode').bbcode();
    });
</script>

以及插件本身，我只是想立即完成基础知识，以便在单击按钮时更新文本框数据:

(function($) {
    "use strict";

    $.fn.bbcode = function() {

        this.click(function() {
            var rel = $(this).attr('rel');
            if (rel == 'editor') {
                return this;
            } else {
                alert($(this).attr('rel'));  // I can see this pop up so the click event is firing
                $('.bbcode[rel=editor]').val('test');
                return this;
            }
        });
    }
} (jQuery));

这似乎是我可以拾取文本框的唯一方法，我真的不想像那样对我想要的类进行硬编码。我认为我正在寻找一种从脚本标签中的函数调用获取集合的方法。

这很可能是我忽略的愚蠢/明显的事情。

Answer 1

立即函数中this的值指的是集合。但是，它被点击处理程序(指的是被点击的元素)内的 this 遮蔽，因此您无法访问它。

创建一个变量来存储这个，这将是您的集合。

(function ($) {
    "use strict";

    $.fn.bbcode = function () {
        var $editors = this;
        this.click(function () {
            var rel = $(this).attr('rel');
            if (rel == 'editor') {
                return this;
            } else {
                alert($(this).attr('rel')); // I can see this pop up so the click event is firing
                $editors.val('test');
                return this;
            }
        });
    }
}(jQuery));