Question

采用以下示例插件：

(function($) {
    $.fn.alertOnClick = function(text) {
        return this.each(function(){
            $(this).click(alert(text));
        });
    }
})(jQuery);

我可能会这样使用：

$('p').alertOnClick("this is a silly plugin");

如何修改插件代码以支持执行以下操作：

$('p').alertOnClick("this is a silly plugin");
$('p#someSpecificP').setAlertText("different alert text");

这会产生以下效果：点击后所有p都会显示"this is a silly plugin" ，但 p的ID为"someSpecificP"会显示"different alert text" {{1}}。

这个例子显然不是我的真实代码，而是作为一个类比。我有一个插件应用于许多默认值的元素。在页面的生命周期中，我可能想要更改应用了插件的各个元素的一些默认设置，但不是全部。

由于

Answer 1

用data()解决了它，不确定这是不是最好的方法......

(function($) {
    $.fn.alertOnClick = function(text) {
        return this.each(function(){
                $(this).data('alertText', text).click(function(){
                    alert($(this).data('alertText'));
                });
        });
    }
    $.fn.setAlertText = function(text) {
        return this.data('alertText', text);
    }
})(jQuery);

Answer 2

为什么不这样做：

$("p").not("#p1").alertOnClick("Hello");
$("#p1").alertOnClick("Bye");

再次对元素调用alertOnClick有效。只需记住取消绑定所有点击事件，然后应用新事件。

Answer 3

<p>test 1</p>
<p>test 2</p>
<p id="s1">test 3</p>
<p>test 4</p>

<script type="text/javascript">
(function($) {
    $.fn.alertOnClick = function(text) {
        return this.each(function(){
            $(this).unbind('click');
            $(this).bind('click', {'t' : text}, function(e){
                alert(e.data.t);
            });
        });
   }
})(jQuery);

$('p').alertOnClick('common alert');
$('p#s1').alertOnClick('unique alert');

</script>

这对我来说很好。我刚刚解除了目标元素的预先绑定事件。

Answer 4

我还没有尝试过，但你应该能够定义一个成员函数，类似于：

(function($) {
    $.fn.alertOnClick = function(text) {
        setAlertText: function(newText) {
                $(this).click(alert(newText));
        }

        return this.each(function(){
                $(this).click(alert(text));
        });
    }
})(jQuery);

jquery插件默认选项修改一旦应用

4 个答案: