jquery如何用for循环

juyonghua 2012-05-29 11:35:57
如何让每一个按钮控制一个图片。。
<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>
...全文
70927 10 打赏 收藏 转发到动态 举报
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
zhanghaoranjn 2012-05-29
  • 打赏
  • 举报
 回复
$(this).bind( ‘click， function() {}）；
zhanghaoranjn 2012-05-29
  • 打赏
  • 举报
 回复
上边的有点问题
 <!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>
zhanghaoranjn 2012-05-29
  • 打赏
  • 举报
 回复 
<!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>
juyonghua 2012-05-29
  • 打赏
  • 举报
 回复
谢谢啦~刚学习麻烦各位大神啦
乌镇程序员 2012-05-29
  • 打赏
  • 举报
 回复
就这个需求来说，不需要循环。
<!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>
程序猿之殇 2012-05-29
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 的回复:]

能麻烦写一下JQ怎么写吗。。。万分感谢。。
[/Quote]
你把jquery的手册,翻到each这块,里面有详细的例子.
在这里等代码的时候,你都写完了.
不好意思,以后不放代码.
ci1699 2012-05-29
  • 打赏
  • 举报
 回复
<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>
juyonghua 2012-05-29
  • 打赏
  • 举报
 回复
能麻烦写一下JQ怎么写吗。。。万分感谢。。
juyonghua 2012-05-29
  • 打赏
  • 举报
 回复
能麻烦写一下吗？谢谢啦
程序猿之殇 2012-05-29
  • 打赏
  • 举报
 回复
设个class,然后用
$(".class").each(function(){
});
jquery版小型婚礼（可动态添加祝福语）程序文件
3：场景三功能控制图片弹跳显示，我用for循环控制弹跳距离。 4：场景四控制图片从顶部往下滑落，停留1秒然后滑向右侧直至消失。 5：场景五慢慢显现，可点击进入婚礼。 6：场景六显现停留1.6秒，然后以碎片的形式向外...
jQuery用for循环 实现图片按顺序加载
jQuery用for循环 实现图片按顺序加载 $(function () { // var len = $("img").length; var len = 11; var tem = ""; for (i = 0; i <= len; i++) { tem += "<li><img src='./images/list" + ...
for 循环，jQuery循环遍历详解
1.for 循环 原生JS最基本的使用： for (var i=0;i&lt;cars.length;i++) { ..... } for - 循环代码块一定的次数 2.for in for/in - 循环遍历对象的属性 以任意顺序遍历一个对象的可枚举属性。对于每个...
jquery 之for 循环
jquery 的 for 循环： 1、 var userList = [11,22,33,44]; 　$.each(userList,function(i,item){ 　console.log(i, item); 　}); 　结果输出：  0 11  1 22 　2 33 　3 44 用法： $...
jquery中的for循环
jquery是无法使用for循环遍历的，只能使用他自己封装的each方法进行遍历 如·$("p").each(function(){ alert($(this).text()) })
基础编程

21,886

社区成员

140,364

社区内容

发帖
与我相关
我的任务
社区描述
从PHP安装配置，PHP入门，PHP基础到PHP应用
社区管理员
  • 基础编程社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章