Question

这可能是一个奇怪的问题，但我没有在任何地方找到解决方案。我的问题很简单，我如何最小化/优化这样的代码？可以通过一些函数或循环来完成。我不希望像这样简单的jQuery代码中有500行。

var span1w = $("span", panel1).width();
var span2w = $("span", panel2).width();
var span3w = $("span", panel3).width();
var span4w = $("span", panel4).width();

var span1 = $("span", panel1);
var span2 = $("span", panel2);
var span3 = $("span", panel3);
var span4 = $("span", panel4);      

$(span1).css("margin-left", "-" + span1w / 2 + "px");
$(span2).css("margin-left", "-" + span2w / 2 + "px");
$(span3).css("margin-left", "-" + span3w / 2 + "px");
$(span4).css("margin-left", "-" + span4w / 2 + "px");

我的HTML就是这个，下面有一堆JS。我试图做的是通过获取宽度并使用简单的CSS来居中 span 元素。

<body id="body">
    <img src="images/logos2.png" alt="KOP-KA logo Martin Mali" class="logo">
    <div id="web" class="uk-grid uk-width-1-1">
        <div class="uk-width-1-4" id="panel1">
            <canvas class="canvas"></canvas>
            <span>SNAKE</span>
        </div>
        <div class="uk-width-1-4" id="panel2">
            <canvas class="canvas"></canvas>
            <span>APP</span>
        </div>
        <div class="uk-width-1-4" id="panel3">
            <canvas class="canvas"></canvas>
            <span>????</span>
        </div>
        <div class="uk-width-1-4" id="panel4">
            <canvas class="canvas"></canvas>
            <span>O KOP</span>
        </div>           
    </div>

这是我的CSS。

#panel1,#panel2,#panel3,#panel4{
    transition: background-color 0.6s linear;
    -moz-transition: background-color 0.6s linear;
    -o-transition: background-color 0.6s linear;
    -webkit-transition: background-color 0.6s linear;      
}

#panel2{
    border-left:1px solid rgba(32,145,216, 0.3);   
}
#panel3{
    border-left:1px solid rgba(32,145,216, 0.3);  
    border-right:1px solid rgba(32,145,216, 0.3);  
}
span{
    color:white;
    font-family:Impact, Charcoal, sans-serif;
    font-size:60px;
    position:absolute;
    left:50%;
    margin: 0;
    top:50%;
    transform: translate(0, -50%);
}

我真的很喜欢新鲜，快速和简单的代码，效果很好。

Answer 1

您可以使用.css()回调函数。对集合中的每个元素调用一次回调。这意味着css在幕后迭代整个集合。在处理程序this内，关键字指的是迭代的当前元素。

$('.uk-grid > div').find('span').css('margin-left', function() {
    return "-" + $(this).width() / 2 + "px";
});

如何最小化jQuery中的代码

1 个答案: