我应该使用数组还是只使用 Jquery 中的 startwith 和字符串来简化此代码？菜鸟答案

【问题标题】：Should I use an array or just simplify this code with startwith and strings in Jquery? Rookie我应该使用数组还是只使用 Jquery 中的 startwith 和字符串来简化此代码？菜鸟
【发布时间】：2013-06-23 00:57:54
【问题描述】：

我刚从 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+'%'});
}

【问题讨论】：

FWIW: $('#x') 应该等同于 $('[id="x"]') - # 是 ID 选择器的一部分，但不是实际上是 ID 值的一部分本身。

标签： jquery arrays simplify

【解决方案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。

【讨论】：

我有 5 个顶部带有文本的 img 按钮（这是我尝试对齐的内容）。在文本下有两个图像相对和绝对。我使用 jquery hover/fade 切换来进行翻转。在馅饼的顶部有一个触发各种事件的触发器。所有这些都是百分比，所以没有已知的高度。我尝试了很多东西
@alexnode 我不是很擅长 CSS，但如果有一件事是接近但不完全，那可能会导致一个（不同的）SO 问题 - 答案可能是“使用 JavaScript”，但如今 CSS 2/3 可以做一些令人印象深刻的事情。我知道的 CSS 足以为真正的设计师设计一个页面来修复它：D
这太棒了，非常感谢。您只需将 i 用于 #"tr"+i 就这么简单。
我都不擅长，但是我厌倦了垂直对齐（是的，我什至尝试在最后使用表格）然后我决定使用 js 来固定“$%” £$%"£东西下降。

【解决方案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 循环的每次迭代中动态更改它们。

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

【讨论】：