teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問jQuaryが動作しません

編集履歴

質問編集履歴

10

修正

2021/02/26 08:27

投稿

mitrasi
mitrasi

スコア49

test CHANGED
File without changes
test CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
  エディタ上でのエラーが出ているわけではないですが、動作しません。
8
8
 
9
- 以下の該当箇所を取り除くと動作するので、全体的な構文ではなく、以下の箇所のどこかが問題かと思われます。
9
+
10
10
 
11
11
 
12
12
 

9

修正

2021/02/26 08:27

投稿

mitrasi
mitrasi

スコア49

test CHANGED
File without changes
test CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  jQuaryが実行されません。
6
6
 
7
- エラーが出ているわけではないですが、動作しません。
7
+ エディタ上でのエラーが出ているわけではないですが、動作しません。
8
8
 
9
9
  以下の該当箇所を取り除くと動作するので、全体的な構文ではなく、以下の箇所のどこかが問題かと思われます。
10
10
 

8

質問タイトルの修正

2021/02/26 08:26

投稿

mitrasi
mitrasi

スコア49

test CHANGED
@@ -1 +1 @@
1
- jQuaryが動作しません（エラーメッセージ等はなし）
1
+ jQuaryが動作しません
test CHANGED
File without changes

7

修正

2021/02/26 08:25

投稿

mitrasi
mitrasi

スコア49

test CHANGED
File without changes
test CHANGED
@@ -314,7 +314,7 @@
314
314
 
315
315
 
316
316
 
317
- ```js
317
+ ```html
318
318
 
319
319
  <footer class="page-footer" role="contentinfo">
320
320
 

6

コードの修正

2021/02/26 08:19

投稿

mitrasi
mitrasi

スコア49

test CHANGED
File without changes
test CHANGED
@@ -140,7 +140,87 @@
140
140
 
141
141
  ```js
142
142
 
143
+
144
+
145
+ $(function () {
146
+
147
+
148
+
149
+ var duration = 300;
150
+
151
+
152
+
153
+ // buttons1 ----------------------------------------
154
+
155
+ // buttons1 1行目
156
+
157
+ $('#buttons1 button:nth-child(-n+4)')
158
+
159
+ .on('mouseover', function () {
160
+
161
+ $(this).stop(true).animate({
162
+
163
+ backgroundColor: '#ae5e9b',
164
+
165
+ color: '#fff'
166
+
167
+ }, duration);
168
+
169
+ })
170
+
171
+ .on('mouseout', function () {
172
+
173
+ $(this).stop(true).animate({
174
+
175
+ backgroundColor: '#fff',
176
+
177
+ color: '#ebc000'
178
+
179
+ }, duration);
180
+
181
+ });
182
+
183
+ // buttons1 ----------------------------------------
184
+
185
+ // buttons1 2行目
186
+
187
+ $('#buttons1 button:nth-child(n+5):nth-child(-n+8)')
188
+
189
+ .on('mouseover', function () {
190
+
191
+ $(this).stop(true).animate({
192
+
193
+ borderWidth: '12px',
194
+
195
+ color: '#ae5e9b'
196
+
197
+ }, duration, 'easeOutSine');
198
+
199
+ })
200
+
201
+ .on('mouseout', function () {
202
+
203
+ $(this).stop(true).animate({
204
+
205
+ borderWidth: '0px',
206
+
207
+ color: '#ebc000'
208
+
209
+ }, duration, 'easeOutSine');
210
+
211
+ });
212
+
213
+
214
+
215
+
216
+
217
+ // buttons1 ----------------------------
218
+
219
+ -- -- -- -- -- --
220
+
221
+ // buttons1 3行目
222
+
143
- $('#buttons1 button:nth-child(n+9)')
223
+ $('#buttons1 button:nth-child(n+9)')
144
224
 
145
225
  .on('mouseenter', function () {
146
226
 
@@ -162,6 +242,14 @@
162
242
 
163
243
  });
164
244
 
245
+
246
+
247
+ });
248
+
249
+
250
+
251
+
252
+
165
253
  ```
166
254
 
167
255
 

5

修正

2021/02/26 08:14

投稿

mitrasi
mitrasi

スコア49

test CHANGED
File without changes
test CHANGED
@@ -218,7 +218,7 @@
218
218
 
219
219
 
220
220
 
221
- ＃追加情報
221
+ ###追加情報
222
222
 
223
223
  以下のように修正したところ、エラーが発生しました。
224
224
 

4

情報の追記

2021/02/26 08:13

投稿

mitrasi
mitrasi

スコア49

test CHANGED
File without changes
test CHANGED
@@ -215,3 +215,31 @@
215
215
  ◆該当jsをとりのぞいて開発ツールのコンソールエラーを見た結果
216
216
 
217
217
  →main.js:42 Uncaught SyntaxError: Unexpected token '}'　が表示されました
218
+
219
+
220
+
221
+ ＃追加情報
222
+
223
+ 以下のように修正したところ、エラーが発生しました。
224
+
225
+ Uncaught SyntaxError: Invalid left-hand side expression in prefix operation　が表示されました
226
+
227
+
228
+
229
+ ```js
230
+
231
+ <footer class="page-footer" role="contentinfo">
232
+
233
+ <small class="copyright">COPYRIGHT &copy; <a href="http://www.shiftbrain.co.jp" target="_blank">SHIFTBRAIN Inc.</a></small>
234
+
235
+ </footer>
236
+
237
+ <script src="./js/vendor/jquery-1.10.2.min.js"></script>
238
+
239
+ <script src="./js/vendor/jquery-ui-1.10.3.custom.min.js"></script>
240
+
241
+ <script src="./js/main.js"></script>
242
+
243
+ </body>
244
+
245
+ ```

3

追記

2021/02/26 08:12

投稿

mitrasi
mitrasi

スコア49

test CHANGED
File without changes
test CHANGED
@@ -154,7 +154,7 @@
154
154
 
155
155
  .on('mouseleave', function () {
156
156
 
157
- $(this).find('> span').stop(true).animte({
157
+ $(this).find('> span').stop(true).animate({
158
158
 
159
159
  width: '0%'
160
160
 
@@ -190,7 +190,7 @@
190
190
 
191
191
  ③該当箇所のjsをとりのぞく
192
192
 
193
- →正常に動作します。
193
+ →正常に動作します。（のちに再度確認したら動きませんでした????）
194
194
 
195
195
  ### 補足情報（FW/ツールのバージョンなど）
196
196
 
@@ -201,3 +201,17 @@
201
201
  エディタ:Brackets
202
202
 
203
203
  ブラウザ:クローム
204
+
205
+
206
+
207
+ ### 追加情報
208
+
209
+ ◆該当jsを含めて開発ツールのコンソールエラーを見た結果
210
+
211
+ →Uncaught SyntaxError: Invalid left-hand side expression in prefix operation　が表示されました
212
+
213
+
214
+
215
+ ◆該当jsをとりのぞいて開発ツールのコンソールエラーを見た結果
216
+
217
+ →main.js:42 Uncaught SyntaxError: Unexpected token '}'　が表示されました

2

コードの修正

2021/02/26 08:05

投稿

mitrasi
mitrasi

スコア49

test CHANGED
File without changes
test CHANGED
@@ -22,7 +22,53 @@
22
22
 
23
23
  ```HTML
24
24
 
25
+ <!DOCTYPE html>
26
+
27
+ <html lang="ja">
28
+
29
+
30
+
31
+ <head>
32
+
33
+ <meta charset="UTF-8">
34
+
35
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
36
+
37
+ <title>Chapter 04-01 &#xB7; jQuery 最高の教科書</title>
38
+
39
+ <link rel="stylesheet" href="./css/normalize.css">
40
+
41
+ <link rel="stylesheet" href="./css/main.css">
42
+
43
+
44
+
45
+ <script src="./js/vendor/jquery-1.10.2.min.js"></script>
46
+
47
+ <script src="./js/vendor/jquery-ui-1.10.3.custom.min.js"></script>
48
+
49
+ <script src="./js/main.js"></script>
50
+
51
+ </head>
52
+
53
+
54
+
55
+ <body>
56
+
57
+
58
+
59
+ <header class="page-header" role="banner">
60
+
61
+ <h1>Creative jQuery Sample</h1>
62
+
63
+ </header>
64
+
65
+
66
+
67
+ <div class="page-main" role="main">
68
+
69
+
70
+
25
- <div id="buttons1">
71
+ <div id="buttons1">
26
72
 
27
73
  <h2>BUTTONS1</h2>
28
74
 
@@ -56,6 +102,30 @@
56
102
 
57
103
  </div>
58
104
 
105
+
106
+
107
+ </div>
108
+
109
+
110
+
111
+ <footer class="page-footer" role="contentinfo">
112
+
113
+ <small class="copyright">COPYRIGHT &copy; <a href="http://www.shiftbrain.co.jp" target="_blank">SHIFTBRAIN Inc.</a></small>
114
+
115
+ </footer>
116
+
117
+
118
+
119
+ </body>
120
+
121
+
122
+
123
+ </html>
124
+
125
+
126
+
127
+
128
+
59
129
  ```
60
130
 
61
131
 

1

修正

2021/02/26 07:41

投稿

mitrasi
mitrasi

スコア49

test CHANGED
File without changes
test CHANGED
@@ -108,6 +108,8 @@
108
108
 
109
109
  →教材データ元では「mouseover」となっているが、テキストでは「mouseenter」となっているためそこで差分は出たがあとは特になし。
110
110
 
111
+ ※比較対象は教材データダウンロードの初期状態です。
112
+
111
113
 
112
114
 
113
115
  ②自分の目でも再度チェック