Question

优化以下内容的最佳方法是什么，所以我的代码更短。

$('#font').live('click', function(){
        var z = $(elmid).css('z-index');
        $('#editorWrapperOuter').css('z-index',(parseInt(z)+1));
        $('#fontTypeBox').show();
});
$('#fontSize').live('click', function(){
        var z = $(elmid).css('z-index');
        $('#editorWrapperOuter').css('z-index',(parseInt(z)+1));
        $('#fontSizeBox').show();
});
$('#fontHeader').live('click', function(){
        var z = $(elmid).css('z-index');
        $('#editorWrapperOuter').css('z-index',(parseInt(z)+1));
        $('#fontHeaderBox').show();
});

Answer 1

如果您可以将font ID更改为fontType，请执行以下操作：

$('#font,#fontSize,#fontHeader').live('click', function(){
        var z = $(elmid).css('z-index');
        $('#editorWrapperOuter').css('z-index',(parseInt(z)+1));
        $('#' + this.id + 'Box').show();
});

相同的代码，除了它使用multiple-selector^(docs)同时选择所有三个。

如果您无法更改该ID，请执行以下操作：

$('#font,#fontSize,#fontHeader').live('click', function(){
        var theID = this.id === "font" ? "fontType" : this.id;
        var z = $(elmid).css('z-index');
        $('#editorWrapperOuter').css('z-index',(parseInt(z)+1));
        $('#' + theID + 'Box').show();
});

Answer 2

将这部分代码抽象为单独的函数，

var foo = function() {
var z = $(elmid).css('z-index');
$('#editorWrapperOuter').css('z-index',(parseInt(z)+1));
$('#fontHeaderBox').show();
};

或创建这些对象的jQuery数组，如下所示： -

$('#font, #fontSize, #fontHeader').live('click', function(){
    var z = $(elmid).css('z-index');
    $('#editorWrapperOuter').css('z-index',(parseInt(z)+1));
    $('#fontHeaderBox').show();
});

希望语法正确。

jquery如何以更优化的方式重写此代码

2 个答案: