JQuery 使用单个函数而不是多个

Question

您好，我想简化这 4 个类似的功能。最后只有选择器在改变。请问我该如何进行？非常感谢！

$('.box.standard .title').css({
                'position' : 'absolute',
                'left' : '50%',
                'top' : '50%',
                'margin-left' : -$('.box.standard .title').outerWidth()/2,
                'margin-top' : -$('.box.standard .title').outerHeight()/2
            });

            $('.box.large .title').css({
                'position' : 'absolute',
                'left' : '50%',
                'top' : '50%',
                'margin-left' : -$('.box.large .title').outerWidth()/2,
                'margin-top' : -$('.box.large .title').outerHeight()/2
            });

            $('.box.wide .title').css({
                'position' : 'absolute',
                'left' : '50%',
                'top' : '50%',
                'margin-left' : -$('.box.wide .title').outerWidth()/2,
                'margin-top' : -$('.box.wide .title').outerHeight()/2
            });

Answer 1

尝试：

var myArray = ['.box.standard', '.box.large', '.box.wide'];

for (var i of myArray) {

  $(i+' .title').css({
                'position' : 'absolute',
                'left' : '50%',
                'top' : '50%',
                'margin-left' : -$(i+' .title').outerWidth()/2,
                'margin-top' : -$(i+' .title').outerHeight()/2
            });

}

Answer 2

把它变成一个函数，随时使用它：

function myFunction(cssClasses){  

  $(cssClasses).css({
                    'position' : 'absolute',
                    'left' : '50%',
                    'top' : '50%',
                    'margin-left' : -$('.box.wide .title').outerWidth()/2,
                    'margin-top' : -$('.box.wide .title').outerHeight()/2
                });

}

myFunction('.box.standard .title');
myFunction('.box.large .title');
myFunction('.box.wide .title');

Answer 3

您可以使用一个函数来帮助您访问 this，它引用所选的元素。应该这样做：

       $('.box.standard .title, .box.large .title, .box.wide .title').css({
            'position' : 'absolute',
            'left' : '50%',
            'top' : '50%',
            'margin-left' : function() {
                return -$(this).outerWidth()/2;
            },
            'margin-top' : function() {
                return -$(this).outerHeight()/2;
            }
        });

JQuery 使用单个函数而不是多个

JQuery using single function instead of multiple

jquery

simplify

centering