Question

我刚开始使用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+'%'});
}

Answer 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的直接函数。

另外，我还没有真正看过这是想要实现的，所以可能有一个好的/可接受的方法来实现纯CSS中的相同目标没有使用JavaScript。

Answer 2

 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循环迭代时动态地改变它们。

请原谅我在手机上的格式不佳。

我应该使用数组还是只使用Jquery中的startwith和字符串简化此代码？新秀

2 个答案: