jqueryを外部ファイル化すると動かなくなる。お願いします。

jqueryを外部ファイル化

Jqueryを外部ファイル化すると動かない

html jquery

html
1
2<!doctype html>
3<html lang="jp">
4<head>
5<meta charset="utf-8">
6<title>フォーム作成</title>
7<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
8<script type="text/javascript" src="js/script.js"></script>
9<link href="css/reset.css" rel="stylesheet" type="text/css">
10<link href="css/style.css" rel="stylesheet" type="text/css">
11</head>
12<body>
13	<ul>
14		<li><a href="#"><img src="img/concept.png" alt="concept"></a><!----></li>
15		<li><a href="#"><img src="img/menu.png" alt="menu"></a><!----></li>
16		<li><a href="#"><img src="img/instagram.png" alt="instagram"></a><!----></li>
17		<li><a href="#"><img src="img/map.png" alt="map"></a><!----></li>
18</body>
19</html>
20

jquery
1
2// JavaScript Document//
3$(function(){
4	$("img[src='../img/concept.png']").mouseover(function(){
5	  $(this).attr("src","../img/concept_2.png");
6	}).mouseout(function(){
7	 $(this).attr("src","../img/concept.png");	
8	})
9})

試したこと

html内に記述すると動きます。
script.jsというファイルに別にすると動かないです。
調べながらいろいろ、試しましたがうまくいきません。
すいません。ご意見お願いします。

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

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

kei344

2018/03/30 15:11

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

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

回答1件

ベストアンサー

おそらく、外部ファイル化した時に、$("img[src='img/concept.png']")を$("img[src='../img/concept.png']")に（srcタグのパス）したような気がします。
ここは、変えなくて良いです。

下記$("img[src='img/concept.png']")のimg[src='img/concept.png']はセレクタなので、ここを変えたら、セレクタが変わるので処理がされません。
JSからのパスではなく、実際のHTMLのファイルからのパスで記述すればOKです。$(this).attr("src","img/concept_2.png");の方も同様です。

javascript
1$(function(){
2	$("img[src='img/concept.png']").mouseover(function(){
3		$(this).attr("src","img/concept_2.png");
4	}).mouseout(function(){
5		$(this).attr("src","img/concept.png");    
6	})
7})
8