JS 基本質問

Question

JS初心者です。有識者からすると非常に簡単かと思いますが、
出来るだけきれいなコードを書きたいので教えていただければと思います。

<input type = 'button' id='3' value='bbb' onclick='douteki(this.id)'>

<script type="text/javascript">
function douteki(id){
  console.log(id);
  $("#"+id).css({'background':'#000000'}); //①番
  }
</script>

ボタンを押すとボタンの背景色がかわります。
コメントアウト①番なのですが、idの書き方はもっとスマートに書くことは可能でしょうか？$("#"+id)とかかないといけないのですかね。。
それともこういう処理の場合、全体的にもっとスマートに書く方法ありますか？

ご教授の程よろしくお願いいたします。

Answer 1

ちょっとidの命名方法がよくないですね
複数のタグに対して反映させるならクラスでやったほうがいいでしょう
どうせやるならscript側でオブジェクトを掴んだ方がきれいです

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  $(".douteki").on('click',function(){
    $(this).css({'background-Color':'#000000'});
  });
});
</script>
<input type = 'button' id='id1' value='aaa' class='douteki'>
<input type = 'button' id='id2' value='bbb' class='douteki'>
<input type = 'button' id='id3' value='ccc' class='douteki'>

追記

jQueryナシ版

<script>
document.addEventListener('click',function(e){
  var t=e.target;
  if(t.className.match(/(^| )douteki(?: |$)/)){
    t.style.backgroundColor='#000000';
  }
});
</script>
<input type = 'button' id='id1' value='aaa' class='douteki'>
<input type = 'button' id='id2' value='bbb' class='douteki'>
<input type = 'button' id='id3' value='ccc' class='douteki'>

Comments

[tqkqt0]

JS側から掴むんですか。ありがとうございます。大変勉強になりました。

[tqkqt0]

今更ですみません、このscript側でオブジェクトを掴む方法ですが、Jqueryを使わないとできないのでしょうか？

[yambejp]

jQueryナシ版追記しときました

[tqkqt0]

ありがとうございました！！

Answer 2

onclickのthisはイベント発生源の要素を示すので、わざわざidを取得してからid名で要素を取得しなくても、そのま要素を引き渡してやればよいです。

<input type = 'button' id='3' value='bbb' onclick='douteki(this)'>
<script type="text/javascript">
function douteki(element) {
  $(element).css({'background':'#000000'});
}
</script>

Comments

[tqkqt0]

なるほど、IDは渡さなくても書けたのですね！
ありがとうございました。