カスタムデータ属性「data-*」を使って要素の表示非表示を制御する

色々な要素を表示、非表示する関数を作ったので公開

CSS

  1. function hideAndShow(op){
  2. var target = 'target', // 対象のグループ名
  3. show = 'show', // 対象の名前
  4. group = 'group', // 被対象のグループ名
  5. name = 'name', // 被対象の名前
  6. active = 'is-active', // アクティブクラス
  7. inactive = 'is-inactive'; // 非アクティブクラス
  9. // 対象グループを非表示
  10. function toHide(tag){
  11. $('[data-'+group+'*="'+tag+'"]').hide();
  12. }
  13. // 対象グループの対象ネームを表示
  14. function toShow(g,t){
  15. $('[data-'+group+'*="'+g+'"][data-'+name+'*="'+t+'"]').show();
  16. }
  17. // クラスを変更
  18. function changeClass(e,g){
  19. $('[data-'+target+'*="'+g+'"]').not(e).removeClass(active).addClass(inactive);
  20. $(e).removeClass(inactive).addClass(active);
  21. }
  23. // 実行内容
  24. function allPractice(e){
  25. var d = e.currentTarget.dataset,
  26. splitTarget = d[target].split(','),
  27. splitShow = d[show].split(',');
  29. $.each(splitTarget,function(i,group){
  30. toHide(group);
  31. $.each(splitShow,function(j,name){
  32. toShow(group,name);
  33. if(op.addClass !== void 0 && $.inArray(group,op.addClass) >= 0)changeClass(e.target,group);
  34. });
  35. });
  36. }
  37. // 対象の設定されたタグをクリックで実行
  38. $('[data-'+target+']').on('click',allPractice);
  40. // 全てのグループを非表示
  41. $('[data-'+group+']').hide();
  43. // 初期表示
  44. if(op.defaultShow !== void 0){
  45. $.each(op.defaultShow,function(i,v){
  46. toShow(v.group,v.name);
  47. });
  48. }
  49. }
  50. $(function(){
  51. hideAndShow({
  52. addClass : ['test'], // 起動する要素のクラスを変更するグループ名
  53. defaultShow : [{ // 初期表示
  54. group : 'test', // グループ名
  55. name : 'tag1' // 名前
  56. }]
  57. });
  58. });

実際に動かしてみる

test-tag1
test-tag2
test-tag3

CSS, HTML, jqueryCSS3, HTML5, javascript, jquery

Posted by アツシオクムラ