Q&A
ブラウザのコンソールでエラーは出てませんか??
好きなアーティストのwebサイトを作っています。
jQueryのクリックイベント(this構文)を使用して、クリックした時に文字色を黒から紫に変更したいのですが全然色が変わらず困っています。
発生している問題・エラーメッセージ
文字色が変化しない
試したこと
Progateで勉強したように、そのままコードを書きました。
補足情報（FW/ツールのバージョンなど）
[index.html]
<ul> <li class="list-item">Aさん</i> <li class="list-item">Bさん</li> <li class="list-item">Cさん</li> </ul>[script.js]
$(function() {
$('.list-item').click(function() {
$(this).css('color' , 'purple');
});
});
[stylesheet.css]
li {
cursor: pointer;
}
コードについては上記の通りです。
何をどう直せば良いのか教えてくださると幸いです。
宜しくお願い致します。
回答1件
0
ベストアンサー
動くサンプル：https://jsfiddle.net/mvgexhot/
コード自体は動くので、jQueryを読み込んでないのでは。
デベロッパーツールでエラーを確認してみてください。
【【初心者向け】コンソールによるJavascriptのエラー表示方法】
https://eng-entrance.com/javascript-display-error
【【jQuery入門】CDNでjQuery本体を読み込む方法と選び方まとめ | amelog】
https://www.ameamelog.com/jquery-cdn/
投稿2020/04/18 17:58
総合スコア69608
kei344様
コメントありがとうございます。
jqueryはダウンロードしてありまして、ファイル名を「jQuery-3.5.0.min.js」としてあります。
こちらの方にクリックイベントのコードを打てば宜しいのでしょうか。
違います。
「CDNでjQuery本体を読み込む方法と選び方まとめ」を参考にして、script.jsより前にjQueryを読み出すHTML（script要素）を書いてください。
kei344様
「CDNでjQuery本体で読み込む方法と選び方まとめ」を参考に、
<body>
・
・
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
$('#list-item').click(function() {
$(this).css('color' , 'purple');
});
});
</script>
</body>
上記のように「index.html」にコードを打ちました。
ここから先は、どのように進めて行けば宜しいのでしょうか。
何度もすみませんが宜しくお願い致します。
クリックイベント部分が質問文にあるコードと違いますが、なぜ変えたのでしょうか。
kei344様
私の方でも色々調べており、コードを変えてしまいました。
変えない方が宜しかったのでしょうか。
[index.html]
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
<script>
$(function() {
$('.list-item').click(function() {
$(this).css('color' , 'purple');
});
});
</script>
上記のようなコードで宜しいのでしょうか。
不要な<script>があります。正しいHTMLでないとスクリプトは正常に動かないです。
また、「宜しいのでしょうか。」ではなく「何をしたときに」「どうなると思って」「どうなったのか」を、出ているエラーなどと併せて、具体的に記述するようにしてください。
エラーはデベロッパーツールで確認できます。https://eng-entrance.com/javascript-display-error
kei344様
無事、解決致しました。
CDNのことを教えていただき、また何度も丁寧にコメントしてくださり、ありがとうございました。
あなたの回答
tips
プレビュー
