jquery如何用for循环

如何让每一个按钮控制一个图片。。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  for(i=0;i<4;i++){
  $("#a"+i).click(function(){
      $("#img"+i).attr({width:"50",height:"80"});
    });
  }
});
</script>
</head>
<body>
<img src="/i/eg_smile.gif" id="img1"/>
<br />
<button id="a1">设置图像的 width 和 height 属性</button>
<img src="/i/eg_smile.gif" id="img2"/>
<br />
<button id="a2">设置图像的 width 和 height 属性</button>
<img src="/i/eg_smile.gif" id="img3"/>
<br />
<button id="a3">设置图像的 width 和 height 属性</button>
<img src="/i/eg_smile.gif" id="img4"/>
<br />
<button id="a4">设置图像的 width 和 height 属性</button>
</body>
</html>

解决方案 »

  1.   

    设个class,然后用
    $(".class").each(function(){
    });
      

  2.   

    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $("button").each(
    function ()
    {
    this.onclick = function ()
    {
    var id =  this.id.replace('a', '');
    $("#img" + id).attr({width:"50",height:"80"});
    }
    }
    )
    });
    </script>
    </head>
    <body>
    <img src="/i/eg_smile.gif" id="img1"/>
    <br />
    <button id="a1">设置图像的 width 和 height 属性</button>
    <img src="/i/eg_smile.gif" id="img2"/>
    <br />
    <button id="a2">设置图像的 width 和 height 属性</button>
    <img src="/i/eg_smile.gif" id="img3"/>
    <br />
    <button id="a3">设置图像的 width 和 height 属性</button>
    <img src="/i/eg_smile.gif" id="img4"/>
    <br />
    <button id="a4">设置图像的 width 和 height 属性</button>
    </body>
    </html>
      

  3.   

    你把jquery的手册,翻到each这块,里面有详细的例子.
    在这里等代码的时候,你都写完了.
    不好意思,以后不放代码.
      

  4.   

    就这个需求来说，不需要循环。
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready( function() {
    $("button").click( function() {
    $("button").click( function() {
    $(this).prev().prev().css({width: '50px', height: '80px'});
    });
    });
    });
    </script>
    </head><body>
    <img src="/i/eg_smile.gif" id="img1"/> <br />
    <button id="a1">设置图像的 width 和 height 属性</button>
    <img src="/i/eg_smile.gif" id="img2"/> <br />
    <button id="a2">设置图像的 width 和 height 属性</button>
    <img src="/i/eg_smile.gif" id="img3"/> <br />
    <button id="a3">设置图像的 width 和 height 属性</button>
    <img src="/i/eg_smile.gif" id="img4"/> <br />
    <button id="a4">设置图像的 width 和 height 属性</button>
    </body>
    </html>
      

  5.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
    var i=1;
    $(document).ready( function() {//页面加载完成后执行
        $("button").each( function() {//遍历页面里所有的button按钮
           $(this).click( function() {//为每过按钮添加点击事件
                $("img").css({width: 50*i+'px', height: 80*i+'px'});//为图片控件设置宽高
            });
            i++;
        });
    });
    </script>
    </head><body>
    <img src="/i/eg_smile.gif" id="img1"/> <br />
    <button id="a1">设置图像的 width 和 height 属性</button>
    <img src="/i/eg_smile.gif" id="img2"/> <br />
    <button id="a2">设置图像的 width 和 height 属性</button>
    <img src="/i/eg_smile.gif" id="img3"/> <br />
    <button id="a3">设置图像的 width 和 height 属性</button>
    <img src="/i/eg_smile.gif" id="img4"/> <br />
    <button id="a4">设置图像的 width 和 height 属性</button>
    </body>
    </html>
      

  6.   

    上边的有点问题
     <!DOCTYPE   html   PUBLIC   "-//W3C//DTD   XHTML   1.0   Transitional//EN "   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
    <html   xmlns= "http://www.w3.org/1999/xhtml ">
    <head>
    <meta   http-equiv= "Content-Type "   content= "text/html;   charset=utf-8 "   />
    <title> 无标题文档 </title>
    <script   type= "text/javascript "   src= "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js "> </script>
    <script   type= "text/javascript ">
    $(document).ready(   function()   {//页面加载完成后执行
            $( "button ").each(   function()   {//遍历页面里所有的button按钮
                  $(this).click(   function()   {//为每过按钮添加点击事件
                           var id = this.id.replace('a', '');
                            $( "#img"+id).css({width:   '50px',   height:  '80px'});//为图片控件设置宽高
                    });
            });
    });
    </script>
    </head><body>
    <img   src= "/i/eg_smile.gif "   id= "img1 "/>   <br   />
    <button   id= "a1 "> 设置图像的   width   和   height   属性 </button>
    <img   src= "/i/eg_smile.gif "   id= "img2 "/>   <br   />
    <button   id= "a2 "> 设置图像的   width   和   height   属性 </button>
    <img   src= "/i/eg_smile.gif "   id= "img3 "/>   <br   />
    <button   id= "a3 "> 设置图像的   width   和   height   属性 </button>
    <img   src= "/i/eg_smile.gif "   id= "img4 "/>   <br   />
    <button   id= "a4 "> 设置图像的   width   和   height   属性 </button>
    </body>
    </html> 
      

  7.   

    $(this).bind(  ‘click， function() {}）；