Question

我正在将一个MooTools插件移植到jQuery中，但在我被困在一个我希望有人可以帮助的小部分之前从未使用过MooTools。

MooTools的：

var bt = new Element('a',{
    "title" : label,
    "text"  : label,
    "class" : classe,
    "events": {
        click: (clickEvent || this.hide).bind(this)
    }
});

this.buttons.push(btn);
return btn;

到目前为止我的jQuery：

var btn = $('a').attr({
    "title" : label,
    "text"  : label,
    "class"  : cssClass
});

btn.click(function() {

});

我只是不确定如何从MooTools转换点击处理程序行......？

编辑：这是完整的功能：

addButton : function(label, cssClass, clickEvent) {

    // jQuery code
    var btn = $('<a></a>').attr({
        "title" : label,
        "text"  : label,
        "class"  : cssClass
    });

    btn.click(function() {

    });

    // Mootools code
    var bt = new Element('a',{
        "title" : label,
        "text"  : label,
        "class" : classe,
        "events": {
            click: (clickEvent || this.hide).bind(this)
        }
    });

    this.buttons.push(btn);
    return btn;
},

它是Modal窗口插件的一部分，所以添加这一点，它正在检查它是否意味着要添加的按钮。如果回调函数被传递，那么它将对其进行操作，如果没有，那么它将隐藏模态窗口......我认为......

注意：只是指出我在jQuery版本中也略微更改了参数和变量名称。这不是一个错字。

Answer 1

试试这个：

var btn = $('<a></a>').attr({
    "title" : label,
    "text"  : label,
    "class" : cssClass
}).click(function(e) {
    //Click event logic (I think you're trying to hide it)
    e.preventDefault();
    $(this).hide();
});

或者，你可以这样写：

var btn = $('<a></a>').attr({
    "title" : label,
    "text"  : label,
    "class" : cssClass
    "click" : function(e){
                e.preventDefault();
                $(this).hide();
    });
});

或者，像这样：

var btn = $('<a></a>').attr('title', label)
                      .attr('text', label)
                      .attr('class', cssClass)
                      .click(function(e) {
                                             e.preventDefault();
                                             $(this).hide();
                                         });

Answer 2

这部分需要重写。 mootools插件实际上是在创建一个新锚点;您拥有的代码将选择页面上的所有锚点并将attrs应用于它们（实际上它可能只影响第一个选定的锚点，但仍然存在问题）。

var btn = $('a').attr({
    "title" : label,
    "text"  : label,
    "class  : cssClass
});

它没有回答你的问题，但这是你需要知道的事情。

Answer 3

addButton : function(label, cssClass, clickEvent){
var btn = $('<a>');

btn.attr({
"title" : label,
"text"  : label,
"class"  : cssClass
}).click( $.proxy( ( clickEvent || this.hide ), this )  );

this.buttons.push( btn );
return btn;
}

注意：

$.proxy( fn, context )在功能上等同于fn.bind( context )

使用.click(fn)比attr("click", fn)好得多，因为前者得到了 jQuery跨浏览器事件修复。

简单的Mootools到jQuery转换 - 事件处理程序

3 个答案: