如何最小化jQuery中的代码

How to minimize code in jQuery

本文关键字：代码 jQuery 最小化      更新时间：2023-09-26

这可能是一个奇怪的问题，但我在任何地方都没有找到解决方案。我的问题很简单，如何最小化/优化这样的代码？这可以通过一些函数或循环来完成吗。我不想在这样的简单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%);
}

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

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

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