jQuery UI 4 按钮。代码重复了4次，我们可以缩短它吗

Question

$('#elmLeft').button({
            icons: {
                primary: "ui-icon-triangle-1-w"
            },
            text: false
        });
$('#elmRight').button({
            icons: {
                primary: "ui-icon-triangle-1-e"
            },
            text: false
        });
$('#elmTop').button({
            icons: {
                primary: "ui-icon-triangle-1-n"
            },
            text: false
        });
$('#elmBottom').button({
            icons: {
                primary: "ui-icon-triangle-1-s"
            },
            text: false
        });

Answer 1

function setButton($element, icon) {
    $element.button({
            icons: {
                primary: icon
            },
            text: false
        });
}
setButton($('#elmLeft'), "ui-icon-triangle-1-w");
setButton($('#elmRight'), "ui-icon-triangle-1-e");
setButton($('#elmTop'), "ui-icon-triangle-1-n");
setButton($('#elmBottom'), "ui-icon-triangle-1-s");

或者，您可以只采用选择器而不是 jQuery 元素，并且只采用字符串的最后一个字母，但这似乎有点矫枉过正。

Answer 2

您可以将图标差异放入一个对象中，并使用它来更改primary：

var icons = {
    elmLeft:   'w',
    elmRight:  'e',
    elmTop:    'n',
    elmBottom: 's'
};
$('#elmLeft, #elmRight, #elmTop, #elmBottom').each(function() {
    $(this).button({
        icons: { primary: 'ui-icon-triangle-1-' + icons[this.id] },
        text:  false
    });
});

我不知道您是否会认为 DRY 足以保证额外的复杂性。如果您在按钮上有一个类，那么您可以使用以下方法使其更清晰：

$('.some_class').each(function() {
    // As above.
});

或者您可以向 icons 添加一个函数，以将 id 和图标信息保持在一起：

var icons = {
    elmLeft:   'w',
    elmRight:  'e',
    elmTop:    'n',
    elmBottom: 's',
    button: function(id) {
        $('#' + id').button({
            icons: { primary: 'ui-icon-triangle-1-' + this[id] },
            text:  false
        });
    }
};
icons.button('elmLeft');
icons.button('elmRight');
icons.button('elmTop');
icons.button('elmBottom');

或者采取更进一步：

var buttons = {
    ids: {
        elmLeft:   'w',
        elmRight:  'e',
        elmTop:    'n',
        elmBottom: 's'
    },
    create: function() {
        for(id in this.ids) {
            if(this.ids.hasOwnProperty(id)) {
                $('#' + id').button({
                    icons: { primary: 'ui-icon-triangle-1-' + this.ids[id] },
                    text:  false
                });
            }
        }
    }
};
buttons.create();

如果您想要一个更干净的命名空间，您可以使用自执行函数来执行上述操作：

(function() {
    var ids = {
        elmLeft:   'w',
        elmRight:  'e',
        elmTop:    'n',
        elmBottom: 's'
    };
    for(id in ids) {
        if(ids.hasOwnProperty(id)) {
            $('#' + id').button({
                icons: { primary: 'ui-icon-triangle-1-' + ids[id] },
                text:  false
            });
        }
    }
})();

Answer 3

我确信它可以变得更短，但据我所知，不是以一种优雅的方式，而且简洁将以牺牲可理解性为代价。