在mootools中转换jquery代码

Convert code of jquery in mootools

本文关键字：jquery 代码 转换 mootools      更新时间：2023-09-26

请帮助将jquery代码转换为mootools。
我没有找到清晰的mootools插件，如jquery http://jsbin.com/sejuquta/528/edit.

jQuery(function($) {
  function tog(v){return v?'addClass':'removeClass';} 
  $(document).on('input', '.clearable', function(){
    $(this)[tog(this.value)]('x');
  }).on('mousemove', '.x', function( e ){
    $(this)[tog(this.offsetWidth-18 < e.clientX-this.getBoundingClientRect().left)]('onX');   
  }).on('click', '.onX', function(){
    $(this).removeClass('x onX').val('');
  });
});

我试图将此代码重写为mootools，但我没有成功(http://jsbin.com/wofaripi/1/edit)。

window.addEvent("domready", function() {
  function tog(v){return v?'addClass':'removeClass';} 
  $$('input[type=text]').addEvent('input', '.clearable', function(){
    this[tog(this.value)]('x');
  }).addEvent('mousemove', '.x', function( e ){
    this[tog(this.offsetWidth-18 < e.clientX-this.getBoundingClientRect().left)]('onX');   
  }).addEvent('click', '.onX', function(){
    this.removeClass('x onX').set('value', '');
  });
});

谢谢。

你很好地完成了转换。

一些注意事项:

#1 - MooTools中的委托看起来有点不同，你可以在这里阅读它，但它应该看起来像:

$(document.body).addEvent('input:relay(input.clearable)', function(){

#2 -我会删除tog"东西"。MooTools有一个带有第二个函数参数"force"的toggleClass方法，它可以做到这一点，并且更易于阅读。

#3 - MooTools中的添加/删除类方法允许添加以空格分隔的类，但这没有文档记录，也没有官方支持。所以我用this.removeClass('x').removeClass('onX')代替this.removeClass('x onX');，这也可以，非正式地。

所以，代码:

window.addEvent("domready", function () {
    $(document.body).addEvents({
        'input:relay(input.clearable)': function () {
            this.toggleClass('x', this.value);
        },
        'mousemove:relay(.x)': function (e) {
            this.toggleClass('onX', this.offsetWidth - 18 < e.clientX - this.getBoundingClientRect().left);
        },
        'click:relay(.onX)': function () {
            this.removeClass('x').removeClass('onX').set('value', '');
        }
    });
});

jsFiddle: http://jsfiddle.net/92McL/

相关文章：