作者Fantasywind (Fantasywind)
看板Ajax
标题[问题] 关於div id於滑鼠点击或移入的取得
时间Mon Apr 19 13:15:16 2010
各位老大好
我目前因为学校活动需要利用php混和java弄了个选手资料的网页
希望做到的效果是，网页开启後让随机选手的照片出现并自动随机移动
整个网页载入完成後，希望可以点击选手照片即跳出一新div标签
在利用sql的查询显示选手的个人资讯
但是我遇到个问题是不论点击哪一个标签
有所反应的只有最後建立的那一个div标签
ex.我共建立十五个照片，点击任何一张照片时，只有第十五个div有反应
因此想请问是否有办法利用java变数将该div标签於滑鼠移入或点击时将其id带入
或是有除了在div标签中使用onmouseover/onclick作为侦测外的方法
以下为部分程式码，麻烦大家帮忙
中间大部分效果为利用dw的spry制作
<!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>
<script src="SpryEffects.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
<?php
echo $div_num;
function creatPhotoDiv($photoNum){
echo "<div class=\"clear\"></div>";
$div_num = "div".$photoNum;
echo $div_num;
echo "<div id=\"".$div_num."\" style=\"LEFT: 400px; POSITION: absolute; TOP: 300px\" onclick=\"mouseOverEffect.start()\";>";
echo "\n";
echo "<img src=\"photo/".$photoNum.".jpg\" />";
echo "\n";
echo "</div>";
echo "\n";
}
function photoMove($photoNum){
/*淡入效果*/
echo "<script lacguage=\"javascript\" type=\"text/javascript\">";
echo "\n";
echo "var opacityEffect=new Spry.Effect.Opacity(\"div".$photoNum."\",1,";
$alpha = rand(3,7);
$alpha /= 10;
echo $alpha;
echo ",{duration:3000});";
echo "\n";
echo "</script>";
echo "\n";
/*标示效果*/
echo "<script lacguage=\"javascript\" type=\"text/javascript\">";
echo "\n";
echo "var mouseOverEffect=new Spry.Effect.Opacity(\"div".$photoNum."\",";
$alpha = rand(3,7);
$alpha /= 10;
echo $alpha;
echo ",1,{duration:1000});";
echo "\n";
echo "</script>";
echo "\n";
/*滑动效果*/
echo "<script lacguage=\"javascript\" type=\"text/javascript\">";
echo "\n";
echo "var from=new Spry.Effect.Utils.Position();";
echo "\n";
$fromX = $photoNum;
$fromX * 100;
echo "from.x=".$fromX.";";
echo "\n";
$fromY = $photoNum;
$fromY * 100;
echo "from.y=".$fromY.";";
echo "\n";
echo "var to=new Spry.Effect.Utils.Position();";
$toX = rand(0,800);
echo "\n";
echo "to.x=".$toX.";";
$toY = rand(0,600);
echo "\n";
echo "to.y=".$toY.";";
echo "\n";
echo "Spry.Effect.makePositioned(document.getElementById(\"div".$photoNum."\"));";
echo "\n";
echo "var moveEffect=new Spry.Effect.Move(\"div".$photoNum."\",from,to,{duration:2000}); ";
echo "\n";
echo "opacityEffect.start();";
echo "\n";
echo "moveEffect.start();";
echo "\n";
echo "</script>";
echo "\n";
}
for($photoNum=1;$photoNum<=15;$photoNum++){
creatPhotoDiv($photoNum);
photoMove($photoNum);
}
echo "$photoNum";
?>
</body>
</html>
----------------------------------------
感谢认真看完的大家！！
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 120.126.194.254
1F：→ kaijajan:嗯...感觉整个内容变复杂了... 04/19 13:49
2F：→ kaijajan:现在不是有ajax的做法...可以让你的程式变得更简洁 04/19 13:49
3F：→ kaijajan:php + html + javascript 混在一起整个很难看 囧 04/19 13:50
4F：→ TonyQ:这不是ajax的问题，是他设计的问题 - -;; 04/19 14:00
5F：→ TonyQ:php 有其他方式可以写得不这麽dirty XD 04/19 14:00
6F：→ Fantasywind:哈 其实我找到解决方法了 毕竟非本科系 临时写的 sor 04/19 14:04
7F：→ kaijajan:只是觉得把所有东西混合在一起很难看...囧... 04/19 15:02
8F：→ kaijajan:特别是" '混合用....囧... 04/19 15:03
9F：→ TonyQ:他其实可以把一些echo 给拿掉 , 不管是要用 " " 夹多行 04/19 15:11
10F：→ TonyQ:还是乾脆使用结束tag让他整个回归html ... 04/19 15:11