HTMLで、クラスはCSSに対する指定をし、データ属性はJavaScriptに対する指定をする。という風に分けたらわかりやすいかもと思い取り組んでいます。
しかしたとえばクリック時に
・「モーダルを開く」
・「開いたモーダルをCOOKIEに保存する」
という2つのイベントを定義したいというときには次のようになるのですが、おかしいでしょうか。
html
1<button type="button" class="OpenModal" data-js="open_modal" data-js2="save_modal" data-modal_name="modal1"> 2モーダルを開く 3</button>
javascript
1// 「モーダルを開く」 2$(document).on("click","[data-js='open_modal']", function(e){ 3 var modalHtml = '<div class="modal">モーダル</div>'; 4 $('body').append(modalHtml); 5}); 6 7// 「開いたモーダルをCOOKIEに保存する」 8$(document).on("click","[data-js2='save_modal']", function(e){ 9 var modalName = $(this).data('modal_name'); 10 $.cookie('modal_name', modalName , { expires: 365, path:'/' }); 11});
それともやはり素直にクラス名で以下のようにした方がいいでしょうか。
javascript
1// .OpenModal をクリックした場合 2$(document).on("click",".OpenModal", function(e){ 3 4 // 「モーダルを開く」 5 var modalHtml = '<div class="modal">モーダル</div>'; 6 $('body').append(modalHtml); 7 8 // 「開いたモーダルをCOOKIEに保存する」 9 var modalName = $(this).data('modal_name'); 10 $.cookie('modal_name', modalName , { expires: 365, path:'/' }); 11});
###考えているメリットなど
データ属性にすると、「HTMLを見たときに、この要素にはどういうイベントがいくつついているのか」が分かるというメリットがありますが、JavaScriptのイベントが別になるので、「JavaScriptを見たときに、この要素にはどういうイベントがいくつついているのか」がわかりにくいというのがデメリットな気がしてます。
またデータ属性は
「data-js="oepn_modal"」と「data-js2="save_modal"」でなく
「data-oepn_modal=""」と「data-save_modal=""」の方がいいでしょうか…
あれこれ悩みます。
他にも管理面とかで問題あるかもしれません。何か思い当たることあれば教えていただきたいです。
回答1件
あなたの回答
tips
プレビュー