作者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