多个图片在3张图片内切换的问题，学校机房在线等，谢谢大家

想做一个机房可用机查看的网页具体代码如下：一个简易版的可以给大家调一下。主要是想让多张图片在3张图片内点击切换
<%@ page language="java" pageEncoding="GB18030"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>查看机房座位信息</title>
<script type="text/javascript">
window.onload = function() {
    // 图片地址数组
    var image_urls = ["images/free.png", "images/sale.png", "images/repair.png"];
    // 初始化数组键值 (0 = 第一个图片)
    var idx = 0;

    // 点击 id 为 img 的图片
    document.getElementById("img").onclick = function() {
        // idx + 1，如果为最后一张，还原回第一张
        idx = idx === image_urls.length - 1 ? 0 : idx + 1;
        // 设置 src
        this.src = image_urls[idx];
    };
};
</script>
<body>
<img id="img" src="images/free.png" />
<img id="img" src="images/free.png" />
<img id="img" src="images/free.png" />
</body>
</html>这样设置只有第一张图能够切换，想让所有座位都能点击切换图片，该怎么做。。想做到效果图大致如下：每个座位都能点击切换图片图片javascript

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

肯定只有第一张，你给所有的ID等于IMG的设置，要不你把那个机房的所有机器在弄一个数组出来，然后，判断是哪个，然后切换图片
就像你设置的这个ID
<img id="img" src="images/free.png" />
<img id="img" src="images/free.png" />
<img id="img" src="images/free.png" />
这等于是3个img，但是你上面判断时候只会取一个，这个你懂吧？然后呢，其他的就不能用了，我的意思是，你的id最好不一样，比如说，img1，img2，循环下去，然后在上面调用的时候判断一下点击的哪个，在去切换图片
<%@ page language="java" pageEncoding="GB18030"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>查看机房座位信息</title>
<script type="text/javascript">
window.onload = function() {
    // 图片地址数组
    var image_urls = ["images/free.png", "images/sale.png", "images/repair.png"];
    // 初始化数组键值 (0 = 第一个图片)
    var idx = 0;

    // 点击 id 为 img 的图片
    document.getElementById("img1_1").onclick = function() {
        // idx + 1，如果为最后一张，还原回第一张
        idx = idx === image_urls.length - 1 ? 0 : idx + 1;
        // 设置 src
        this.src = image_urls[idx];
    };
};
</script>
</head>
<body>
<img height="20" width="22" alt="无人使用" src="images/free.png">无人使用
<img height="20" width="22" alt="有人使用" src="images/sale.png">有人使用
<img height="20" width="22" alt="机位故障" src="images/repair.png">机位故障<br><br/><br><br/>
<table border="0" align="left" cellpadding="0" cellspacing="0"
id="table_SeatList">
<tr locno="01" rowno="1" seatimgrow="1">
<td align="right" valign="middle" width="70"><span class=" f12"
style="white-space:nowrap;">1行 </span>  </td> <td width="24" align="center" valign="middle" height="22"> </td>
<td width="24" align="center" valign="middle" height="22"> </td>
<td width="24" align="center" valign="middle" height="22"> </td>
<td width="24" align="center" valign="middle" height="22"> </td> <td title="1行 10排 "><img id="img1_10" src="images/free.png" />
<td title="1行 9排 "><img id="img1_9" src="images/free.png" />
<td title="1行 8排 "><img id="img1_8" src="images/free.png" />
<td title="1行 7排 "><img id="img1_7" src="images/free.png" />
<td title="1行 6排 "><img id="img1_6" src="images/free.png" />
<td title="1行 5排 "><img id="img1_5" src="images/free.png" />
<td title="1行 4排 "><img id="img1_4" src="images/free.png" />
<td title="1行 3排 "><img id="img1_3" src="images/free.png" />
<td title="1行 2排 "><img id="img1_2" src="images/free.png" />
<td title="1行 1排 "><img id="img1_1" src="images/free.png" />
<tr locno="01" rowno="2" seatimgrow="2">
<td align="right" valign="middle" width="70"><span class=" f12"
style="white-space:nowrap;">2行 </span>  </td>
<td width="24" align="center" valign="middle" height="22"> </td>
<td width="24" align="center" valign="middle" height="22">
<td width="24" align="center" valign="middle" height="22">
<td width="24" align="center" valign="middle" height="22">
<td title="2行 10排 "><img id="img2_10" src="images/free.png" />
<td title="2行 9排 "><img id="img2_9" src="images/free.png" />
<td title="2行 8排 "><img id="img2_8" src="images/free.png" />
<td title="2行 7排 "><img id="img2_7" src="images/free.png" />
<td title="2行 6排 "><img id="img2_6" src="images/free.png" />
<td title="2行 5排 "><img id="img2_5" src="images/free.png" />
<td title="2行 4排 "><img id="img2_4" src="images/free.png" />
<td title="2行 3排 "><img id="img2_3" src="images/free.png" />
<td title="2行 2排 "><img id="img2_2" src="images/free.png" />
<td title="2行 1排 "><img id="img2_1" src="images/free.png" />
<tr locno="01" rowno="2" seatimgrow="2">
<tr locno="01" rowno="0" seatimgrow="3">
<td align="right" valign="middle" width="70"><span class=" f12"
style="white-space:nowrap;"></span>  </td>
<td width="24" align="center" valign="middle" height="22"> </td>
<td width="24" align="center" valign="middle" height="22"> </td>
<td width="24" align="center" valign="middle" height="22"> </td>
<td width="24" align="center" valign="middle" height="22"> </td>
<td width="24" align="center" valign="middle" height="22"> </td>
<td width="24" align="center" valign="middle" height="22"> </td>
<td width="24" align="center" valign="middle" height="22"> </td>
<td width="24" align="center" valign="middle" height="22"> </td>
<td width="24" align="center" valign="middle" height="22"> </td>
<td width="24" align="center" valign="middle" height="22"> </td>
<td width="24" align="center" valign="middle" height="22"> </td>
<td width="24" align="center" valign="middle" height="22"> </td>
<td width="24" align="center" valign="middle" height="22"> </td>
<td width="24" align="center" valign="middle" height="22"> </td>
<td width="24" align="center" valign="middle" height="22"> </td>
<td width="24" align="center" valign="middle" height="22"> </td>
<td width="24" align="center" valign="middle" height="22"> </td>
<td width="24" align="center" valign="middle" height="22"> </td>
<td width="24" align="center" valign="middle" height="22"> </td>
<td width="24" align="center" valign="middle" height="22"> </td>
<td width="24" align="center" valign="middle" height="22"> </td>
</tr> <tr locno="01" rowno="3" seatimgrow="4">
<td align="right" valign="middle" width="70"><span class=" f12"
style="white-space:nowrap;">3行 </span>  </td>
<td width="24" align="center" valign="middle" height="22"> </td>
<td width="24" align="center" valign="middle" height="22"> </td>
<td width="24" align="center" valign="middle" height="22"> </td>
<td width="24" align="center" valign="middle" height="22">
<td title="3行 10排 "><img id="img3_10" src="images/free.png" />
<td title="3行 9排 "><img id="img3_9" src="images/free.png" />
<td title="3行 8排 "><img id="img3_8" src="images/free.png" />
<td title="3行 7排 "><img id="img3_7" src="images/free.png" />
<td title="3行 6排 "><img id="img3_6" src="images/free.png" />
<td title="3行 5排 "><img id="img3_5" src="images/free.png" />
<td title="3行 4排 "><img id="img3_4" src="images/free.png" />
<td title="3行 3排 "><img id="img3_3" src="images/free.png" />
<td title="3行 2排 "><img id="img3_2" src="images/free.png" />
<td title="3行 1排 "><img id="img3_1" src="images/free.png" />
<tr locno="01" rowno="4" seatimgrow="5">
<td align="right" valign="middle" width="70"><span class=" f12"
style="white-space:nowrap;">4行 </span>  </td>
<td width="24" align="center" valign="middle" height="22"> </td>
<td width="24" align="center" valign="middle" height="22"> </td>
<td width="24" align="center" valign="middle" height="22"> </td>
<td width="24" align="center" valign="middle" height="22">
<td title="4行 10排 "><img id="img4_10" src="images/free.png" />
<td title="4行 9排 "><img id="img4_9" src="images/free.png" />
<td title="4行 8排 "><img id="img4_8" src="images/free.png" />
<td title="4行 7排 "><img id="img4_7" src="images/free.png" />
<td title="4行 6排 "><img id="img4_6" src="images/free.png" />
<td title="4行 5排 "><img id="img4_5" src="images/free.png" />
<td title="4行 4排 "><img id="img4_4" src="images/free.png" />
<td title="4行 3排 "><img id="img4_3" src="images/free.png" />
<td title="4行 2排 "><img id="img4_2" src="images/free.png" />
<td title="4行 1排 "><img id="img4_1" src="images/free.png" />
4楼来看看，照你的意思调了调做了下，然后怎么判断还是不太懂..
东西有些多，思路是，点击时候判断ID，然后给那个ID赋值图片路径。
document.getElementById("img1_1").onclick = function() {
        // idx + 1，如果为最后一张，还原回第一张
        idx = idx === image_urls.length - 1 ? 0 : idx + 1;
        // 设置 src
        this.src = image_urls[idx];
    };function getId(img){
alert(img.id)//这里取到id之后在操作你想要的那个步骤
}<td title="1行 10排 "><img id="img1_10" src="2012.jpg" onclick="getId(this)"/>
大概是这个意思
document.getElementById("img1_1")这里还是img1_1吗？function我加在了   this.src = image_urls[idx];
    };后面，给图片添加了onclick代码还是不对..点击没反应..刚开始学习JSP，还不是很熟练，希望能说得细致些。谢谢你
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function getId(img){
var image_urls = ["2011.jpg", "2012.jpg", "2013.jpg"];
var idx = 0;
idx = idx === image_urls.length - 1 ? 0 : idx + 1;
    // 设置 src
    document.getElementById(img.id).src = image_urls[idx];
}
</script></head>
<body>
<form>
<td title="1行 10排 "><img id="img1_10" src="2011.jpg" onclick="getId(this)"/>
</form>
</body>
</html>按照你的那个修改的，不过有些地方你需要自己在弄
function getId(img){
    var image_urls = ["2011.jpg", "2012.jpg", "2013.jpg"];
    var idx = 0;
    idx = idx === image_urls.length - 1 ? 0 : idx + 1;
    // 设置 src
    document.getElementById(img.id).src = image_urls[idx];//这里放置获得的那个img.id
}应该是互相进步吧，我对纯JS不是很熟悉，而且改完之后好像只能是2张图片切换，我正在看看是否能弄成多个的
<!DOCTYPE html>
<html>
<head>

<script>
function getID(e){
alert(e.pic);
if(e.pic=='free'){
e.src='images/sale.png';
}else if(e.pic=='sale'){
e.src='images/repair.png';
}else{
e.src='images/free.png';
}
}

</script>
</head>
<body><img id="img" src="images/free.png" pic="free" onclick="getID(this)"/>
<img id="img" src="images/free.png" pic="sale"onclick="getID(this)"/>
<img id="img" src="images/free.png" pic="repair"onclick="getID(this)"/>

</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function getId(img){
var image_urls = ["2011.jpg", "2012.jpg", "2013.jpg"];
var idx;
if(img.name==image_urls[0]){
idx=1;
}else if(img.name==image_urls[1]){
idx=2;
}else{
idx=0;
}
    // 设置 src
    document.getElementById(img.id).name = image_urls[idx];
    document.getElementById(img.id).src = image_urls[idx];
}
</script></head>
<body>
<form>
<td title="1行 10排 "><img id="img1_10" src="2011.jpg" name="2011.jpg" onclick="getId(this)"/>
</form>
</body>
</html>这样就可以了，不过貌似只适合在3个的，多了就不知道了
大概就是这个思想，没有测试不知道可以不。你看看
<!DOCTYPE html>
<html>
<head>

<script>
function getID(e){
alert(e.pic);
if(e.pic=='free'){
e.src='images/sale.png';
e.pic='sale';
}else if(e.pic=='sale'){
e.src='images/repair.png';
e.pic='repair';
}else{
e.src='images/free.png';
e.pic='free';
}
}

</script>
</head>
<body><img id="img" src="images/free.png" pic="free" onclick="getID(this)"/>
<img id="img" src="images/free.png" pic="sale"onclick="getID(this)"/>
<img id="img" src="images/free.png" pic="repair"onclick="getID(this)"/>

</body>
</html>
//设置图片被点击的事件
$('img.site').click(function(){
var $me = $(this), ind = $me.attr('index') || 0;
ind = (ind+1)%image_urls.length;
$me.attr('src', image_urls[ind]);
$me.attr('index', ind);
});
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function getId(img){
var image_urls = ["images/free.png", "images/sale.png", "images/repair.png"];
var idx;
//用name和image_urls数组比较，看看是哪个，然后变化图片
if(img.name==image_urls[0]){
idx=1;
}else if(img.name==image_urls[1]){
idx=2;
}else{
idx=0;
}
    document.getElementById(img.id).name = image_urls[idx];//给name赋值，保持name和src是一样的，笨办法，但是我暂时想不到好的
    document.getElementById(img.id).src = image_urls[idx];//给src赋值
}
</script></head>
<body>
<form>
<td title="1行 10排 "><img id="img1_10" src="images/free.png" name="images/free.png" onclick="getId(this)"/>
<td title="1行 11排 "><img id="img1_11" src="images/free.png" name="images/free.png" onclick="getId(this)"/>
</form>
</body>
</html>差不多都注释了···，好吧，闪人