jQueryのクリックイベントでボタンの背景色を変えたい

前提・実現したいこと

jQueryでボタンをクリックしたときに、ボタンの背景色を赤にしたい

発生している問題・エラーメッセージ

クリックしてもボタンの色が変わらない

エラーメッセージ
Uncaught TypeError: "#button1".css is not a function

### 該当のソースコード
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>クリックイベントと切り替え</title>
  <link rel="stylesheet" type="text/css" href="base.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  <script>
  $(function(){
    // ここに処理を記述
    $('#button1').on('click', function() {
      ('#button1').css('background-color','red')
    });
  });
  </script>
</head>
<body>
  <div id="wrapper">
    <div id="button1" class="button">
      <p>button1</p>
    </div><!-- button1 -->
    <div id="button2" class="button">
      <p>button2</p>
    </div><!-- button2 -->
    <div id="button3" class="button">
      <p>button3</p>
    </div><!-- button3 -->
  </div><!-- wrapper -->
</body>
</html>

試したこと

セレクタ間違いかと思い、
$('.button').on('click', function() {
を試しましたが動きません。
エラーメッセージを見ると#button1とcssがfunctionではないと出てるので
('#button1').css('background-color','red')
が違うのか・・・
2時間ほど調べていますが答えに辿り着けません。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

単純に「$」の書き忘れですが、$(this)の方が汎用的です

javascript
1('#button1').css('background-color','red')
2↓↓↓
3$(this).css('background-color','red')

投稿2021/08/17 02:38

編集2021/08/17 02:39

yambejp

総合スコア116724

osaya

2021/08/17 02:50

ありがとうございます！無事作動しました！！！ button2,button3も同じアクションをしたく、以下のように複数セレクタ指定したのですが、そうするとまた動かなくなってしまいました。しかも今回はエラーメッセージが出ません。 $(function(){ // ここに処理を記述 $('#button1','#button2','#button3').on('click', function() { $(this).css('background-color','red') }); });

osaya

2021/08/17 02:53

''が多かったようです、、、すみません。解決しました。

yambejp

2021/08/17 02:54

せっかくbuttonクラスをつけているのですから汎用的に $('#button1','#button2','#button3').on('click', function() { ↓↓↓ $('.button').on('click', function() { なお、どうしても列記したいときには $('#button1,#button2,#button3')

osaya

2021/08/17 02:57

回答ありがとうございます。汎用的なのは$('.button')なのですね、、勉強になります。上記に修正します！

行動規範の内容に同意します