Question

我正在尝试创建我的第一个jquery小部件，它添加了一个'x'来清除输入。它工作但是一旦我点击'x'清除输入它就很慢。我认为这是因为它每次都会遍历所有输入，但我不知道如何防止这种情况发生。

循环问题还是其他问题？

(function($, undefined) {       
$.widget("jomojo.clearmojo", {
    version: "1.0",
    options: {
        disabled: null,
        icons: {
            primary: null,
            secondary: null
        }
    },

    _create: function(){
        $('input[type=text]').addClass('clearable');
        $('input[type=text]::-ms-clear').css('display', 'none'); 

        this.eventNamespace = "." + this.widgetName + this.uuid;

        function toggle(value){
            return value ? 'addClass':'removeClass';
        };

        this.document
            .on('mouseenter', '.clearable', function(){
                if (options.disabled){
                    return;
                };

                if ($(this).prop('disabled')===false){
                    $(this)[toggle(this.value)]('x');
                };
            })
            .on('mousemove', '.x', function(event){
                $(this)[toggle(this.offsetWidth-18 < event.clientX-this.getBoundingClientRect().left)]('onX');
            })
            .on('mouseleave', '.x', function(){
                $(this).removeClass('x');
            })
            .on('click', '.onX', function(event){
                event.preventDefault();
                $(this).removeClass('x onX').val('').change();
                $(this).trigger('keyup');   
            });
    }, // end create
});
}(jQuery));

Answer 1

在Barmar的帮助下，这是我提出的工作代码。如他所建议的那样使用toggleClass，并且还添加了一些关于代码应该在输入上工作的条件。

(function($, undefined) {       
    $.widget("jomojo.clearmojo", {
        version: "1.0",

        _create: function(){
            $('input[type=text]').addClass('clearable');

            this.element
                .on('mouseenter', function(){
                    if ($(this).prop('disabled')===false && $(this).val()!='' && $(this).prop('readonly')===false){
                        $(this).toggleClass('x');
                    };
                })
                .on('mousemove', function(event){
                    if ($(this).prop('disabled')===false && $(this).val()!='' && $(this).prop('readonly')===false){
                        $(this).toggleClass('onX', this.offsetWidth-18 < event.clientX-this.getBoundingClientRect().left);
                    };
                })
                .on('mouseleave', function(){
                    $(this).removeClass('x');
                })
                .on('click', function(event){
                    var elementOffsetWidth=this.offsetWidth
                    var parentOffset=$(this).parent().offset();
                    var relativeX=event.pageX-parentOffset.left;
                    var xOffset=elementOffsetWidth-16

                    if ($(this).prop('disabled')===false && $(this).val()!='' && $(this).prop('readonly')===false && relativeX>xOffset){
                        event.preventDefault();
                        $(this).removeClass('x onX').val('').change();
                        $(this).trigger('keyup');
                    };
                });
        }, // end create
    });
}(jQuery));

还需要在css代码中添加以下内容以禁用IE中的清除功能，我想从v10 +开始。如果需要为其他浏览器完成此操作，请添加代码。如果有办法将其添加到小部件代码中，请查看代码。

input[type=text]::-ms-clear{
    display: none;
}

.clearable{
    background: #fff url('../images/delete.jpg') no-repeat right -10px center;
    background-size: 10px 8px;
    padding: 0px 0px 0px 0px; 
    transition: background 0.4s;
}

.clearable.x{
    background-position: right 3px center;
}

.clearable.onX{
    cursor: pointer;
}

jquery小部件循环遍历所有输入

1 个答案: