2012年7月30日 星期一

jQuery 取得多選的排序



最近要用到的,在選擇的圖片上標示目前的順序,當取消選取一張照片時,照片的排序編號也要重新排過,稍微研究一下就玩出來了。

首先準備這樣的html,click_ord的class是用來塞數字的。
<div class="album_img"><img src="img"><div class="click_ord"></div></div>

然後在js裡,當點擊圖片時,顯示點擊的順序,每點一張變數就+1
  1. //照片張數   
  2. $photoNum=0;   
  3.   
  4. ++$photoNum;   
  5. $(this).find(".click_ord").text($photoNum).show();  

取消的時候就比較好玩,要重新算一下排序
  1. //取得取消照片的編號   
  2. $thisCancelNum=$(this).find(".click_ord").text();   
  3. //讓數字區塊隱藏   
  4. $(this).find(".click_ord").hide();   
  5. //繞行所有的照片,並重新排序   
  6. $(".album_img").each(function(i){   
  7.     $photoOrd=$(this).find(".click_ord").text();   
  8.     //如果原本數字大於取消照片的數字,就-1   
  9.     if($photoOrd!="" && $photoOrd>$thisCancelNum){   
  10.         $(this).find(".click_ord").text($photoOrd-1);   
  11.     }   
  12. });  

最後記得$photoNum也要-1,點新照片才會再把數字加上去。

這樣就完成了。
反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...