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

[lyforever (LY)]

※ 引述《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
推 chigi:偷推113!
→ beerson:感謝c大耐心教學!
→ lyforever:其實他這個寫法不是挺好的
推 beerson:不太懂為什麼要計算字串欸...
推 beerson:請問如果要找這類的PLUGIN該打甚麼關鍵字呢？
→ lyforever:你要看的是他get_list的function
→ lyforever:建議你學會jquery 比找plugin實在吧
推 beerson:恩L大說的是，但那段我一直看不太懂~"~
→ lyforever:他寫了一個t_champion-list.php
→ lyforever:會處理 "刺殺,坦克,法師" 這種字串 然後return data
→ lyforever:顯然沒有傳入字串 就是 <div class="champ_list ...
→ lyforever:以下預設的內容....