0

我刚从 JavaScript/jQuery 开始，我发现语法仍然有点压倒性。写几行代码需要几个小时。我想知道您是否可以指出正确的方向以使这段代码更聪明。我有一个类似下面的代码来设置div的垂直对齐方式。我尝试做一个数组，然后迭代i++以存储值，然后进行数学运算，但我在找到正确的语法以使其工作时遇到了问题。我什至不确定两个数组是否是同时计算 5 个不同值的好结构。我试过：

$('[id^=#tr1]').css({top : ratio+'%'});

进而：

var buttonheight = $this.height

然后我尝试为另一个div做这件事。我将在明天早上继续阅读并阅读更多内容，但我认为有人可以在这里给我一些帮助。这不是必需的，因为我的代码可以工作，但我想学习正确地做事。 

function setAbsolutePosition()
{ 
    var button1height= $("#buttonbg1").height();
    var button2height= $("#buttonbg2").height();
    var button3height= $("#buttonbg3").height();
    var button4height= $("#buttonbg4").height();
    var button5height= $("#buttonbg5").height();
    var text1height=$("#tr1").height();
    var text2height=$("#tr2").height();
    var text3height=$("#tr3").height();
    var text4height=$("#tr4").height();
    var text5height=$("#tr5").height();
    var ratio1 = 50-((text1height-1)/button1height/2*100);
    var ratio2 = 50-((text2height-1)/button2height/2*100);
    var ratio3 = 50-((text3height-1)/button3height/2*100);
    var ratio4 = 50-((text4height-1)/button4height/2*100);
    var ratio5 = 50-((text5height-1)/button5height/2*100);
    $("#tr1").css({top : ratio1+'%'});
    $("#tr2").css({top : ratio2+'%'});
    $("#tr3").css({top : ratio3+'%'});
    $("#tr4").css({top : ratio4+'%'});
    $("#tr5").css({top : ratio5+'%'});
}
4

2 回答 2

1

每当某些事情显得过于重复时，通常是......考虑：

for (var i = 1; i <= 5; i++ ) { // i in [1,5]
    var buttonNeight = $("#buttonbg" + i).height();
    var textHeight = $("#tr" + i).height();
    var ratio = 50-((textHeight-1)/buttonHeight/2*100);
    $("#tr" + i).css({top : ratio+'%'});
}

请注意，在这种情况下，不需要使用数组，因为所有值都是 的直接函数i。

此外，我还没有真正研究过它试图完成什么，所以可能有一种好的/被接受的方法可以在不使用 JavaScript 的情况下在纯 CSS 中实现相同的目标。

于 2013-06-23T01:05:04.843 回答
1 
 function setAbsolutePosition(){ 

        for (var I =1; I <=5; I++){
               var buttonheight= $("#buttonbg" + I).height();
               var textheight=$("#tr" + I).height();
               var ratio = 50-((textheight-1)/buttonheight/2*100);

               $("#tr" + I).css({top : ratio+'%'});
    }

我认为这就是您要寻找的。因为 jquery 使用字符串来查找项目，所以您可以在 tge 循环的每次迭代中动态更改它们。

请原谅我在手机上的糟糕格式。

于 2013-06-23T01:13:43.110 回答