jQueryで要素をクリック時にcolorを変更したい

表題の通りです。

jQueryで.loginクラスをクリックしたら.loginMordal pの文字色が変わるようにしたいです。

下記記述だと動かないのですが、何が違うのでしょうか？
宜しくお願いします。

html
1<!DOCTYPE html>
2<html lang="jp">
3<head>
4<meta charset="utf-8">
5<meta name="viewport" content="width=device-width, initial-scale=1">
6<meta name="keywords" content="">
7<meta name="description" content="">
8<title></title>
9<link rel="stylesheet" href="index10.css">
10<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
11<script type="text/javascript" src="js/script.js"></script><!--jQueryはbody前に記述-->
12</head>
13<body>
14
15
16<div class="login">
17  ログイン
18</div>
19<div class="loginMordal">
20  <p>
21    ID
22  </p>
23  <input type="text" name="ID" class="id" placeholder="ID" />
24  <p>
25    パスワード
26  </p>
27  <input type="text" name="pass" class="pass" placeholder="パスワード" />
28</div>
29
30
31
32
33<script src="index10.js"></script>
34</body>
35</html>

css
1
2*{
3  border: 1px solid rgb(55, 126, 51);
4}
5
6body{
7  position: relative;
8}
9
10
11.login{
12  display: inline-block;
13}
14
15.loginMordal{
16  width:200px;
17  height:200px;
18  border-radius: 10px;
19  background: rgba(189, 191, 199, 0.87);
20  text-align: center;
21  margin: 0 auto;
22  margin-top: 100px;
23}
24
25.loginMordal p{
26  padding: 0 5px;
27  text-align: left;
28  color: rgb(33, 230, 227);
29}
30
31.id,.pass{
32  border: 1px solid rgb(124, 118, 232);
33  width: 180px;
34  height: 25px;
35}

jQuery
1$(function(){
2  $('.login').on('click',function(){
3    $('.loginMordal p).css('color','rgb(255, 0, 0)';
4  })
5}
6

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

回答4件

回答者さん方がおっしゃる通り、
閉じるところをしっかり閉じれば、動きます。
jQueryの後に読み込んでいる、

js/script.js

このjsの中身でも閉じ忘れがないかとかのご確認をしてみるといいかもしれません。
JavaScriptは、前のスクリプトでエラーが出ている場合、
それ以降の処理が全て止まってしまうことがあります。

ブラウザのデベロッパーツールなどで、
なにかエラーがでていないか確認してみてください。

投稿2018/03/05 02:44

miyabi_pudding

総合スコア9528

ベストアンサー

色々閉じ忘れてましたよ
上記ソース全部下記にまとめてしまいましたが、私のローカルでは動きました。

<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<title></title>
<link rel="stylesheet" href="index10.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script><!--jQueryはbody前に記述-->
</head>
<body>

<div class="login">
  ログイン
</div>
<div class="loginMordal">
  <p>
    ID
  </p>
  <input type="text" name="ID" class="id" placeholder="ID" />
  <p>
    パスワード
  </p>
  <input type="text" name="pass" class="pass" placeholder="パスワード" />
</div>

<script>
$(function(){
	  $('.login').on('click',function(){
	    $('.loginMordal p').css('color', 'rgb(255, 0, 0)');
	  });
});
</script>
<style type="text/css">
*{
  border: 1px solid rgb(55, 126, 51);
}
body{
  position: relative;
}
.login{
  display: inline-block;
}
.loginMordal{
  width:200px;
  height:200px;
  border-radius: 10px;
  background: rgba(189, 191, 199, 0.87);
  text-align: center;
  margin: 0 auto;
  margin-top: 100px;
}
.loginMordal p{
  padding: 0 5px;
  text-align: left;
  color: rgb(33, 230, 227);
}
.id,.pass{
  border: 1px solid rgb(124, 118, 232);
  width: 180px;
  height: 25px;
}
</style>
</body>
</html>

投稿2018/03/03 11:04

退会済みユーザー

総合スコア0

$('.loginMordal p').css('color','rgb(255, 0, 0)';

.cssのカッコを閉じていないと思います！
↓

$('.loginMordal p').css('color','rgb(255, 0, 0)');

投稿2018/03/03 10:42

xyunow

総合スコア122

kato00

2018/03/03 10:46

ありがとうございます！！で、動かず、、（泣）うーん、他の箇所の問題っぽいですねぇ。。

xyunow

2018/03/03 10:49 編集

自分の環境で動かしてみました！以下でどうでしょうか？ $(function(){ $('.login').on('click',function(){ $('.loginMordal p').css('color','rgb(255, 0, 0)'); }); });

kato00

2018/03/03 11:02

xyunowさんご親切にありがとうございます！！頂いたコードをそのままコピペして見たのですが、やはり動かず、、試しに、単純に <div class=”sample1"> a </div> を $('.sample1').text('b'); でテキスト変わるか試して見たのですが、変わらなかったので、そもそもjQueryが読み込まれていないような？？ htmlでの読み込んでいるjQueryのファイル名は合っているのですが、、

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

javascript
1$(function(){
2  $('.login').on('click',function(){
3    $('.loginMordal p).css('color','rgb(255, 0, 0)';
4  })
5}

↓ p の直後シングルクォート閉じてない

javascript
1$(function(){
2  $('.login').on('click',function(){
3    $('.loginMordal p').css('color','rgb(255, 0, 0)';
4  })
5}

投稿2018/03/03 10:19

編集2018/03/03 10:29

退会済みユーザー

総合スコア0

kato00

2018/03/03 10:24

シングルクォート！閉じ漏れてましたね。閉じて見ましたが、やはり動かず、、、他にも原因があるのでしょうか？？

退会済みユーザー

2018/03/03 10:29 編集

あるかもしれませんとしか言えません。提示されていない部分に問題があれば、動かないことは十分に考えられます。 thisの方は削除。イベント発生している要素と変更対象が異なっていたため。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

jQueryで要素をクリック時にcolorを変更したい

関連した質問