Re: [問題] 請問英雄聯盟的這個頁面功能怎麼做?

看板Web_Design作者 (LY)時間11年前 (2013/07/15 11:07), 編輯推噓4(408)
留言12則, 3人參與, 最新討論串2/3 (看更多)
※ 引述《beerson (啤酒僧)》之銘言: : 痾,其實我是一直想要想一個方法解釋我要問的問題 : 但一直找不到合適的措辭,所以就跑去打LOL : 結果發現,這個頁面就是我要做的功能阿 : 貼上連結請問一下版上的各位前輩 : 像這種點擊checkbox後更改下方顯示的內容資訊的方法是怎麼做的? : 小弟有想過是否是先load所有的英雄資料然後再用js控制顯示與否 : 但小弟的程式能力普普,不太會做 : 是否有現成的JQuery函式可以套用呢? : 附上連結:http://lol.garena.tw/champions/ : By the way, 小弟是用rails架的站,不知道在這種環境用哪個方法最適合? 直接看原始碼 <input type="checkbox" name="filter" id="filter" value="assassin"> "刺殺" $().ready(function() { $(".someClass").tipTip({maxWidth: "400px",edgeOffset: 10}); //以下開始, 選擇input id為filter的 並且綁訂click event, //換成白話文來就是有沒有叫filter的被按了, 每次被按了就執行以下的情況 $('input[id=filter]').click(function(){ //呼叫blockUI $.blockUI(); //算一下有多少被打勾 var filters = $('input[id=filter]:checked').length; var filter_str = ""; //把字串計算出來 for(k=0;k<filters;k++){ filter_str = (filter_str == "") ? "" : filter_str+","; filter_str = filter_str + $('input[id=filter]:checked').eq(k).val(); } //去算新的list get_list(filter_str); }); //網頁一開始預設的list get_list(); }); //取得list 的function function get_list(types){ types = (types == undefined) ? "" : types; //用post去取得新的list 並且showy在叫champion_list的地方 $.post("t_champion-list.php",{type : types},function(data){ $('#champion_list').html(data); $('#champion_list').show(); $(".someClass").tipTip({maxWidth: "400px",edgeOffset: 30}); }); //結束unblock UI $.unblockUI(); } -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 140.113.235.116

07/15 18:27, , 1F
偷推113!
07/15 18:27, 1F

07/15 21:20, , 2F
感謝c大耐心教學!
07/15 21:20, 2F

07/16 11:18, , 3F
其實他這個寫法不是挺好的
07/16 11:18, 3F

07/16 11:49, , 4F
不太懂為什麼要計算字串欸...
07/16 11:49, 4F

07/16 11:52, , 5F
請問如果要找這類的PLUGIN該打甚麼關鍵字呢?
07/16 11:52, 5F

07/16 11:54, , 6F
你要看的是他get_list的function
07/16 11:54, 6F

07/16 11:55, , 7F
建議你學會jquery 比找plugin實在吧
07/16 11:55, 7F

07/16 12:24, , 8F
恩L大說的是,但那段我一直看不太懂~"~
07/16 12:24, 8F

07/16 12:46, , 9F
他寫了一個t_champion-list.php
07/16 12:46, 9F

07/16 12:47, , 10F
會處理 "刺殺,坦克,法師" 這種字串 然後return data
07/16 12:47, 10F

07/16 12:48, , 11F
顯然沒有傳入字串 就是 <div class="champ_list ...
07/16 12:48, 11F

07/16 12:50, , 12F
以下預設的內容....
07/16 12:50, 12F
文章代碼(AID): #1HusUF-B (Web_Design)
討論串 (同標題文章)
文章代碼(AID): #1HusUF-B (Web_Design)