iT邦幫忙

0

jquery 浮動圖片移動後無法收回

  • 分享至 

  • xImage

RT 我有段浮動圖片程式碼長這樣

function float_call()
{
	$.getJSON("data/complex.json",
	function(b)
		{
			var request_json=b.requestlist;
			request_length=request_json.length;
			p=1;
			h=130;
			request_html="";
			for(q=0;q<3;q++)
			{
				var firstpath="cover/";
				var coverpath=encodeURIComponent(request_json[q].coverpath).replace(/[%A-F8]/g,"").substring(12,210);
				var endpath="Cover.jpg";
				request_html+="<img id=p"+p+" height="+h+"px width="+h+"px src="+firstpath+coverpath+endpath;
				request_html+="></img>";
				
				request_html+='<p id=message-float'+p+' style=display:none>歌手:'+request_json[q].artist+"<br>";
				request_html+="歌名:"+request_json[q].title+"<br>";
				request_html+='專輯:'+request_json[q].album+"<br>";
				request_html+="時間:"+request_json[q].length+"</p>";
				h=h-(10*p);
				p++;
			}
			request_html+="";
			$("#cover-float").html(request_html);
			
			$("#apDivp1").click(function(){
			$("#p1").removeAttr('style');
			$("#p2").removeAttr('style');
			$("#p3").removeAttr('style');
			$("#p1").animate({left:'10px'});
			$("#p2").animate({right:'110px'});
			$("#p3").animate({right:'10px'});
			$("#message-float1").animate({opacity:'show'});
			$("#message-float2").animate({opacity:'hide'});
			$("#message-float3").animate({opacity:'hide'});
			});
			$("#apDivp2").click(function(){
			$("#p1").removeAttr('style');
			$("#p2").removeAttr('style');
			$("#p3").removeAttr('style');
			$("#p1").animate({right:'230px'});
			$("#p2").animate({left:'10px'});
			$("#p3").animate({right:'10px'});
			$("#message-float1").animate({opacity:'hide'});
			$("#message-float2").animate({opacity:'show'});
			$("#message-float3").animate({opacity:'hide'});
			});
			$("#apDivp3").click(function(){
			$("#p1").removeAttr('style');
			$("#p2").removeAttr('style');
			$("#p3").removeAttr('style');
			$("#p1").animate({right:'230px'});
			$("#p2").animate({right:'110px'});
			$("#p3").animate({left:'10px'});
			$("#message-float1").animate({opacity:'hide'});
			$("#message-float2").animate({opacity:'hide'});
			$("#message-float3").animate({opacity:'show'});
			});
			
			$("#p1").error(function(){
			$("#cover-float").find("#p1").attr('src','/img/no.png');
			});
			$("#p2").error(function(){
			$("#cover-float").find("#p2").attr('src','/img/no.png');
			});
			$("#p3").error(function(){
			$("#cover-float").find("#p3").attr('src','/img/no.png');
			});
		}
	)
}

剛去請教了另一位有在開台的問題已得到了初步解決 可是點久了還是會重疊在一起
順便問問這段程式碼能不能用迴圈或陣列之類的方式再次簡化

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

1

code還是一如往常的亂七八糟,之後維護真的會搞死自己,簡單的簡化方式,因為沒辦法跑debug,在自行跑一下,有問題再微調
/images/emoticon/emoticon10.gif

var flag = true;
var coverObj = $("#cover-float");
var firstp1path = "cover/";
var endp1path = "Cover.jpg";	
var sizeAry = [130, 120, 100];	
var pList = [];
pList[0] = {left: '10px', right: '110px', right: '10px'};
pList[1] = {right: '230px', left: '10px', right: '10px'};
pList[2] = {right: '230px', right: '110px', left: '10px'};
var msgList = [];
msgList[0] = [ 'show', 'hide', 'hide'];
msgList[1] = [ 'hide', 'show', 'hide'];
msgList[2] = [ 'hide', 'hide', 'show'];	

function clickEvent(apObj, pAry, msgAry){
	apObj.click(function() {
		var j = 1;
		for (var key in pAry) {				
			var pObj = $("#p" + index);					
			var msgObj = $("#message-float" + index);
			pObj.animate({
				key: pAry[key]
			});
			msgObj.animate({
				opacity: msgAry[j-1]
			});
			j++;
		}
	});
}

function htmlProc(b) {
	var request_json = b.requestlist;
	request_length = request_json.length;
	request_total_time = 0;
	request_total_number = 0;
	request_html = "";
	var q;			
	for (q = 0; q < 3; q++) {        
		var coverp1path = encodeURIComponent(request_json[q].coverpath).replace(/[%A-F8]/g, "").substring(12, 210); 
		var id = q + 1;
		request_html = '<img id="p'+id+'" height="'+sizeAry[q]+'px" width="'+sizeAry[q]+'px" src="' + firstp1path + coverp1path + endp1path + '"></img>'; 		
		request_html += '<p id="message-float'+id+'" style="display:none">歌手:' + request_json[q].artist + "<br>";
		request_html += "歌名:" + request_json[q].title + "<br>";
		request_html += '專輯:' + request_json[q].album + "<br>";
		request_html += "時間:" + request_json[q].length + "</p>";
	}
	request_html += "";
	coverObj.html(request_html);
	
	if(flag){	
		objProc(coverObj, pList, msgList);
		flag = false;
	}
}

function objProc(coverObj, pList, msgList) {
	var k;
	for (k = 0; k < 3; k++) { 
		var index = k + 1;
		var apObj = $("#apDivp" + index);
		clickEvent(apObj, pList[k], msgList[k]);
		var pStr = "#p" + index;	
		$(pStr).error(function() {
			coverObj.find(pStr).attr('src', '/img/no.png');
		});
	}
}

function float_call() {
	$.getJSON("data/complex.json", htmlProc(b));
}
看更多先前的回應...收起先前的回應...

Unexpected token ( in line 392
第一個function(b)那裡

移除掉後又會說Cannot read property 'click' of undefined
第二個for迴圈還會導致網頁整個當掉

調整了,先前說了,你的function(b) 要拆出來獨立,有問題你要自己處理,沒有環境沒辦法幫你修正,要連修正都不會的話,誰都幫不了你~
/images/emoticon/emoticon67.gif

還是一樣Cannot read property 'click' of undefined.....看來apObj必須在click前宣告

我剛有試著自己寫一個獨立函式 現在只差動作跑不出來而已了

function clickEvent()
{
	$.getJSON("data/complex.json",
	function(b)
		{
			var request_json=b.requestlist;
			request_length=request_json.length;
			p=1;
			id=1;
			h=130;
			var coverObj = $("#cover-float");
			var firstfpath="cover/";
			var endfpath="Cover.jpg";
			request_html="";
			for(q=0;q<3;q++)
			{
				var apObj=$("#apDivp" + id);
				var pObj = $("#p" + id);
				var msgObj = $("#message-float" + id);
				var key=id-1;
				var coverfpath=encodeURIComponent(request_json[q].coverpath).replace(/[%A-F8]/g,"").substring(12,210);
				request_html+="<img id=p"+p+" height="+h+"px width="+h+"px src="+firstfpath+coverfpath+endfpath;
				request_html+="></img>";
				
				request_html+='<p id=message-float'+p+' style=display:none>歌手:'+request_json[q].artist+"<br>";
				request_html+="歌名:"+request_json[q].title+"<br>";
				request_html+='專輯:'+request_json[q].album+"<br>";
				request_html+="時間:"+request_json[q].length+"</p>";
				h=h-(10*p);
				p++;
				id++;
			}
			coverObj.html(request_html);
			
			apObj.click(function(){
			pObj.animate({key: pList[key]});
			msgObj.animate({opacity: msgList[key]});
			});
			
			var pList = [];
			pList[0] = {left: '10px', right: '110px', right: '10px'};
			pList[1] = {right: '230px', left: '10px', right: '10px'};
			pList[2] = {right: '230px', right: '110px', left: '10px'};
			var msgList = [];
			msgList[0] = [ 'show', 'hide', 'hide'];
			msgList[1] = [ 'hide', 'show', 'hide'];
			msgList[2] = [ 'hide', 'hide', 'show'];
			
				$(pObj).error(function() {
					coverObj.find(pStr).attr('src', '/img/no.png');
				});
		}
	)
}

是$.getJSON("data/complex.json" 這個不要跟處理綁在一起,id是動態的,怎麼會寫成id=1;,自己慢慢改吧,總之不要在function(b) 裡又寫一大串,不然你的code永遠難以維護~
/images/emoticon/emoticon05.gif

所以你的apObj.click要放在哪才不會undefind又不會把網頁搞掛掉 還有至今我還沒看過他有一次動作過/images/emoticon/emoticon10.gif

還是把測試用檔案發給你好了這樣你也比較好debug

froce iT邦大師 1 級 ‧ 2018-07-16 08:07:20 檢舉

說真的,我很懶得看你的code,因為實在太難幫你理清了,不過給你兩個建議:
1.ES6有模版,如果你一定要用ES5,你可以用類似下面的方式去替代。

'<img id="{0}" class="{1}">'.replace("{0}", "123").replace("{1}", "active")

2.動畫部分不要用jQ做,用css的keyframes去做,這樣你只要操作class就好。這樣第一更能精準的控制效果,第二更改效果時只要去改css就好。

如果讓你們看起來很亂那還真是抱歉阿 畢竟是自學的/images/emoticon/emoticon10.gif

自己也是自學,所以跟自學無關,是你沒有花時間在基礎上,一個code改上十遍,自然就會寫得好,程式要那麼好混,那還有什麼搞頭~

我還是姑且問一下好了是哪段讓你們覺得亂/images/emoticon/emoticon19.gif
什麼等號前加號前沒加空格除外
這段code我自己讀大致上都能了解其中函意 我寫code原則上會先以寫出功能出來為第一考量 之後才會想如何簡化 效能我也會考慮 像是要我選原生的for跟jq的each我就會選前者 因為each實在是跑太慢了

先前說過了,重覆的code或邏輯不要到處寫,這是最基本的,另外html跟js不要綁在一起寫,不然你的html調整,js就要跟著動,等於整個function都要重寫,不是寫的人看懂就好,要考慮之後的維護還有功能調整的問題,寫的爛之後的時候都在搞維護就飽了,更別說功能越加越多,最後會比重頭寫還麻煩~
/images/emoticon/emoticon67.gif

我並沒有像你說的時常在維護/images/emoticon/emoticon10.gif
重複的code你是說request_html這個?
如果你有想到比request_html +=更好的也能告訴我啊
其實這個維護也沒像你所說的這麼難 因為html那都是套個id而已
id如果變了也只要在最後輸出結果的地方改就好
基本上現在主要會遇到的問題就是timeout沒了 不過上次問要如何改寫也沒人給個能參考的回覆 之前有個說要改的現在也音訊全無了

btw 現在首樓的code有經過簡化且功能大致上也有了 長這樣

function clickEvent()
{
	$.getJSON("data/complex.json",
		function(b)
		{
			var request_json=b.requestlist;
			request_length=request_json.length;
			p=1;
			h=130;
			checkn=0;
			request_html="";
			for(q=0;q<3;q++)
			{
				var firstpath="cover/";
				var coverpath=encodeURIComponent(request_json[q].coverpath).replace(/[%A-F8]/g,"").substring(12,210);
				var endpath="Cover.jpg";
				request_html+="<img id=p"+p+" height="+h+"px width="+h+"px src="+firstpath+coverpath+endpath;
				request_html+="></img>";
				
				request_html+='<p id=message-float'+p+' style=display:none>歌手:'+request_json[q].artist+"<br>";
				request_html+="歌名:"+request_json[q].title+"<br>";
				request_html+='專輯:'+request_json[q].album+"<br>";
				request_html+="時間:"+request_json[q].length+"</p>";
				h=h-(10*p);
				p++;
			}
			request_html+="";
			$("#cover-float").html(request_html);
			
			$("#apDivp1").click(function(){
				if(checkn!=1)
				{
					checkn=1;
					$("#p2,#p3").removeAttr('style');
					$("#p1").animate({left:'10px'},function(){$("#p2,#p3").removeAttr('style');});
					$("#message-float1").animate({opacity:'show'});
					$("#message-float2,#message-float3").animate({opacity:'hide'});
				}
			});
			$("#apDivp2").click(function(){
				if(checkn!=2)
				{
					checkn=2;
					$("#p1,#p3").removeAttr('style');
					$("#p2").animate({left:'10px'},function(){$("#p1,#p3").removeAttr('style');});
					$("#message-float1,#message-float3").animate({opacity:'hide'});
					$("#message-float2").animate({opacity:'show'});
				}
			});
			$("#apDivp3").click(function(){
				if (checkn!=3)
				{
					checkn=3;
					$("#p1,#p2").removeAttr('style');
					$("#p3").animate({left:'10px'},function(){$("#p1,#p2").removeAttr('style');});
					$("#message-float1,#message-float2").animate({opacity:'hide'});
					$("#message-float3").animate({opacity:'show'});
				}
			});
			$("#p1").error(function(){
			$("#cover-float").find("#p1").attr('src','/img/no.png');
			});
			$("#p2").error(function(){
			$("#cover-float").find("#p2").attr('src','/img/no.png');
			});
			$("#p3").error(function(){
			$("#cover-float").find("#p3").attr('src','/img/no.png');
			});
		}
	)
}

最後我要說一點:至少我用這code是有功能的而不是像你一樣沒功能 我說過了我都是以用出功能為優先 我不會讓沒功能的code佔據在我的點播系統上

有沒有功能自己到這試試最快:http://ac1011.hopto.org:4095/

froce iT邦大師 1 級 ‧ 2018-07-16 16:21:47 檢舉

ES6現在不是還沒幾款瀏覽器能支援嗎/images/emoticon/emoticon19.gif
keyframe也是 這支援率/images/emoticon/emoticon10.gif
我沒辦法保證使用者一定是從IE以外的瀏覽器進來我的點播系統所以還是算了吧/images/emoticon/emoticon10.gif

簡單來說,如果你覺得code好維護,有問題就要自己想辦法解決,
如果要別人幫你,就要先把code調整成好維護的樣子,不然別人也沒辦法幫忙,
因為那等於要整個大修,沒人有那麼多時間,request_html 的處理,
不知道做法,也可以寫成function,把變數當參數傳入,總之不要寫一大串,
能包成function就要這樣做,等你把所有邏輯都依function劃分出來,
就會知道要怎麼進一步精簡了,能給的只有意見,實作還是要你自己去做。

froce iT邦大師 1 級 ‧ 2018-07-16 18:24:02 檢舉

ES6不能用,我有提供你ES5的解法也在上面啊。也有babel可以把它編譯成ES5。kksugsay的拿出來當函式也不錯。
keyframes ie11能用。

你寫太多jQ,又是影音網站,本來就該拋棄ie 11以下的版本了。

嘛 我改天再試著改看看吧 最近挺忙的 有功能的code能用就先用吧......

我要發表回答

立即登入回答