在jQuery中使用for循环缓存字符串

时间:2012-08-29 16:35:21

标签: ajax jquery

我对jQuery编程很新,所以请耐心等待。

我正在尝试缓存我在js文件底部的列表,以便页面运行更顺畅。

我要去的清单看起来像这样:

$(document).ready(function () {

  hover($('#rim-1'), 900); 
  hover($('#rim-2'), 800); 
  hover($('#rim-3'), 1000); 
  hover($('#rim-4'), 900); 
  hover($('#rim-5'), 800); 
  hover($('#rim-6'), 1000); 
  hover($('#rim-7'), 900); 
  hover($('#rim-8'), 800); 
  hover($('#rim-9'), 1000); 
  hover($('#rim-10'), 900); 
  hover($('#rim-11'), 800); 
  hover($('#rim-12'), 1000); 
  shadow($('#shadow-1'), 900); 
  shadow($('#shadow-2'), 800); 
  shadow($('#shadow-3'), 1000); 
  shadow($('#shadow-4'), 900); 
  shadow($('#shadow-5'), 800); 
  shadow($('#shadow-6'), 1000);
  shadow($('#shadow-7'), 900); 
  shadow($('#shadow-8'), 800); 
  shadow($('#shadow-9'), 1000); 
  shadow($('#shadow-10'), 900); 
  shadow($('#shadow-11'), 800); 
  shadow($('#shadow-12'), 1000);
}

我想设置一个for循环,这样不仅“#rim”和“#shadow”会增加数字,而且它们的速度也会增加100。

我试图构建的内容类似于:

var hover = $("#floating-rim-container").find(".floating-rim-wrapper");
for (i=0; i<6; i++) {
    var speed = speed + 100;
}

当然,这还远未完成。我只是不确定我应该如何设置这个多方面的命令。我背后的理论是,也许我可以使用包装器将它们组合起来用于所有不同的语句。在html中,它们看起来像:

<div id="floating-rim-container">

            <a href="#">
                <img src="images/rim-middle.png" class="floating-rim-wrapper" id="rim-7">
            </a>        
            <a href="#">
                <img src="images/rim-middle.png" class="floating-rim-wrapper" id="rim-8">
            </a>        
            <a href="#">
                <img src="images/rim-middle.png" class="floating-rim-wrapper" id="rim-9">
            </a>
            <a href="#">
                <img src="images/rim-middle.png" class="floating-rim-wrapper" id="rim-10">
            </a>
            <a href="#">
                <img src="images/rim-middle.png" class="floating-rim-wrapper" id="rim-11">
            </a>
            <a href="#">
                <img src="images/rim-middle.png" class="floating-rim-wrapper" id="rim-12">
            </a>
                <div id="shadow-container">
                    <img src="images/shadow.png" class="shadow">
                    <img src="images/shadow.png" class="shadow">
                    <img src="images/shadow.png" class="shadow">
                    <img src="images/shadow.png" class="shadow">
                    <img src="images/shadow.png" class="shadow">
                    <img src="images/shadow.png" class="shadow">
                </div>
            </div>

任何帮助都会受到大力赞赏!

1 个答案:

答案 0 :(得分:0)

试试这个,

var i=900;
$("#floating-rim-container").find(".floating-rim-wrapper").each(function(){
  hover($(this),i);
  i=i+100;
});

类似于shadow