teratail
回答率
85.29%
質問するログイン新規登録
トップに関する質問表示中の画像srcを取得したい（javascript）

編集履歴

質問編集履歴

12

誤字

2018/03/02 06:53

投稿

退会済みユーザー
title CHANGED
@@ -1,1 +1,1 @@
1
- 画像scrの取得がズレる（javascript）
1
+ 表示中の画像srcを取得したい（javascript）
body CHANGED
File without changes

11

誤字ら

2018/03/02 06:53

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -1,6 +1,8 @@
1
1
  ###【目的】
2
2
  ボタンクリック時に、スライダーで表示中の画像srcを取得したいです。(>_<)
3
3
 
4
+ その画像srcをラジオボタンのvalueに挿入しているのですけれど、どうしても画像srcが取得できません。
5
+
4
6
  ###【試しているコード】
5
7
  下記コード8行目```var src = $(this).parent().find('.slide img').attr('src');```を試してみました。
6
8
 

10

内容の簡略化

2018/03/02 06:53

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -1,34 +1,20 @@
1
- ###【問題】
1
+ ###【目的】
2
- スライダーの画像srcを取得する方法でつまずいています。(>_<)
2
+ ボタンクリック時に、スライダーで表示中の画像srcを取得したいです。(>_<)
3
3
 
4
+ ###【試しているコード】
4
- 下記コード14行目```var src = $('.linkimg img').attr('src');```が正しくないようで、画像srcが取得できないのです。
5
+ 下記コード8行目```var src = $(this).parent().find('.slide img').attr('src');```を試してみました。
5
6
 
6
- ###【現状】
7
- 改めて現状の機能ですが、
7
+ しかし、表示中の画像srcでなく、スライダー１枚目の画像srcが取得されてしまいます。
8
8
 
9
- > ➀ スライダーの画像を「複製ボタン」で複製し、
9
+ 現状の動作、図、コードを貼っておきますので、ご確認頂ければ幸いです。
10
10
 
11
- > ➁ 複製画像srcを取得し、
11
+ ■現状の動作↓
12
+ [https://jsfiddle.net/3pe0j501/27/](https://jsfiddle.net/3pe0j501/27/)
12
13
 
14
+ ■現状の図↓
13
- > ➂ ラジオボタンのvalueに挿入する。
15
+ ![イメージ説明](044becb8354ddcb47be6d5b3341c2f93.jpeg)
14
16
 
15
- という機能になっています。
16
-
17
- しかし、上述した**【問題】**のせいで、➁複製画像srcを取得できないのです。
18
-
19
- 具体的には、
20
-
21
- **複製画像srcでなく、スライダー１枚目の画像srcが取得されてしまうのです。**
22
-
23
- 下記に、実際の動作、イメージ図、コードを貼っておきます。
24
-
25
- ■実際の動作↓
26
- [https://jsfiddle.net/3pe0j501/3/](https://jsfiddle.net/3pe0j501/3/)
27
-
28
- ■イメージ図↓
29
- ![イメージ説明](94423060cb9db8a4803b83416de581d7.jpeg)
30
-
31
- ■そのコード↓
17
+ ■現状のコード↓
32
18
  ```html
33
19
  <!-- 【スライダー】 -->
34
20
  <p class="func">▼画像スライダー</p>
@@ -43,7 +29,7 @@
43
29
 
44
30
  </div>
45
31
  </div>
46
- <div class="btn">複製ボタン</div>
32
+ <div class="btn">ボタン</div>
47
33
  </section>
48
34
 
49
35
  <section id="B">
@@ -58,18 +44,13 @@
58
44
 
59
45
  </div>
60
46
  </div>
61
- <div class="btn">複製ボタン</div>
47
+ <div class="btn">ボタン</div>
62
48
  </section>
63
49
  </section>
64
50
 
65
- <!-- 【複製画像】 -->
66
- <p class="func">▼複製画像</p>
67
- <div class="linkimg"></div>
68
-
69
51
  <!-- 【ラジオvalue連動】 -->
70
- <p class="ques">▼valueを複製画像のファイル名にしたい</p>
52
+ <p class="ques">▼valueを表示中の画像ファイル名にしたい</p>
71
- <input class='abc' type=radio value='複製ボタンクリック前' checked><span>value=</span><span id="output"></span>
53
+ <input class='abc' type=radio value='ボタンクリック前' checked><span>value=</span><span id="output"></span>
72
-
73
54
  ```
74
55
 
75
56
  ```javascript
@@ -78,15 +59,11 @@
78
59
  $(document).ready(function(){
79
60
 
80
61
  $(".btn").click(function(){
81
-
82
- //画像連動機能
62
+
83
- var cloneObject = $(this).parent().find(".slider").clone();
84
- console.log(cloneObject[0]);
85
- $(".linkimg").html("")
86
- cloneObject.appendTo($(".linkimg"));
87
-
88
- //src変更機能
63
+ // 表示中の画像srcを取得したいのに、最初の画像srcしか取得できない
89
- var src = $('.linkimg img').attr('src');
64
+ var src = $(this).parent().find('.slide img').attr('src');
65
+
66
+ // 取得したsrcをvalueに挿入
90
67
  var splittedUrl = src.split('/')
91
68
  document.getElementsByClassName("abc")[0].value = splittedUrl[splittedUrl.length - 1].split('.')[0];
92
69
 
@@ -95,13 +72,15 @@
95
72
  });
96
73
  })(jQuery);
97
74
 
75
+
98
76
  ////検証のためのvalue表示
99
77
  var target = document.getElementsByClassName("abc")[0];
100
78
  var output = document.getElementById("output");
101
79
  setInterval(function(){
102
- output.innerHTML = target.value;
80
+ output.innerHTML = target.value;
103
81
  },10);
104
82
 
83
+
105
84
  ////スライダー機能
106
85
  (function(){
107
86
 
@@ -156,42 +135,16 @@
156
135
  }());
157
136
  ```
158
137
  ```css
138
+ /*スライダーのCSS*/
159
- .slide,
139
+ .slide {
160
- .linkimg {
161
140
  width: 100px;
162
141
  height: 50px;
163
142
  border: 1px solid #888;
164
143
  }
165
- #AB {
166
- display: flex;
167
- }
168
- #A, #B {
169
- margin: 0 20px 0 0px;
170
- }
171
144
  img {
172
145
  width: 100px;
173
146
  height: 50px;
174
- background: #65beff;
175
147
  }
176
- .btn {
177
- background: #0a7cff;
178
- width: 100px;
179
- border-radius: 10px;
180
- color: #FFF;
181
- font-weight: bold;
182
- text-align: center;
183
- margin: 10px 0 0px 0;
184
- cursor: pointer;
185
- }
186
- .func {
187
- background: #ddd;
188
- padding: 5px;
189
- }
190
- .ques {
191
- background: #FF6565;
192
- padding: 5px;
193
- }
194
-
195
148
  .slideSet > div {
196
149
  width: 100px;
197
150
  height: 50px;
@@ -212,11 +165,34 @@
212
165
  overflow: hidden;
213
166
  position: relative;
214
167
  }
168
+
169
+ /*装飾のCSS*/
170
+ #AB {
171
+ display: flex;
172
+ }
173
+ #A, #B {
174
+ margin: 0 20px 0 0px;
175
+ }
176
+ .btn {
177
+ background: #0a7cff;
178
+ width: 100px;
179
+ border-radius: 10px;
180
+ color: #FFF;
181
+ font-weight: bold;
182
+ text-align: center;
183
+ margin: 10px 0 0px 0;
184
+ cursor: pointer;
185
+ }
186
+ .ques {
187
+ background: #FF6565;
188
+ padding: 5px;
189
+ }
190
+ .func {
191
+ background: #ddd;
192
+ padding: 5px;
193
+ }
215
194
  ```
216
195
 
217
196
  以上です。
218
197
  長くなってしまってスミマセン。
219
-
220
- 先述しましたが、原因は上記コード14行目```var src = $('.linkimg img').attr('src');```にあるようなので、ここをうまく修正して正しいsrcを取得したいです。
221
-
222
198
  どうぞよろしくお願いいたします。m(_ _)m

9

誤字

2018/03/02 06:51

投稿

退会済みユーザー
title CHANGED
@@ -1,1 +1,1 @@
1
- 画像scrの取得がズレてしまう（javascript）
1
+ 画像scrの取得がズレる（javascript）
body CHANGED
File without changes

8

誤字修正

2018/03/02 04:53

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -1,7 +1,7 @@
1
1
  ###【問題】
2
2
  スライダーの画像srcを取得する方法でつまずいています。(>_<)
3
3
 
4
- 下記コード14行目```var src = $('.linkimg img').attr('src');```が正しくないために、画像srcが取得できないのです。
4
+ 下記コード14行目```var src = $('.linkimg img').attr('src');```が正しくないようで、画像srcが取得できないのです。
5
5
 
6
6
  ###【現状】
7
7
  改めて現状の機能ですが、
@@ -18,7 +18,7 @@
18
18
 
19
19
  具体的には、
20
20
 
21
- **複製画像srcでなく、スライダーの１枚目にある画像srcが取得されてしまうのです。**
21
+ **複製画像srcでなく、スライダー１枚目の画像srcが取得されてしまうのです。**
22
22
 
23
23
  下記に、実際の動作、イメージ図、コードを貼っておきます。
24
24
 

7

内容の簡略化

2018/03/02 01:14

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -1,28 +1,25 @@
1
+ ###【問題】
1
2
  スライダーの画像srcを取得する方法でつまずいています。(>_<)
2
3
 
3
- ###■目的と問題、対処すべき場所
4
- **【目的】**
5
- 複数枚のスライダーのうち、**表示中の画像src**を取得したい。
4
+ 下記コード14行目```var src = $('.linkimg img').attr('src');```が正しくないために、画像srcが取得できないのです。
6
5
 
7
- **【問題】**
6
+ ###【現状】
8
- **表示中の画像srcでなく、１枚目の画像srcが取得されてしまう。**
7
+ 改めて現状の機能ですが、
9
8
 
10
- **【対処すべき場所】**
9
+ > ➀ スライダーの画像を「複製ボタン」で複製し、
11
- 下記コード14行目```var src = $('.linkimg img').attr('src');```が原因です。どうやらここでsrcが取得できていない様子。
12
10
 
13
- ###■現状
14
- 改めて現状の機能ですが、
11
+ > ➁ 複製画像srcを取得し、
15
12
 
16
- > スライダーで表示中の画像を「複製ボタン」で複製し、
13
+ > ➂ ラジオボタンのvalueに挿入する。
17
14
 
18
- > 複製画像srcを、ラジオボタンのvalueに挿入する。
19
-
20
15
  という機能になっています。
21
16
 
22
- しかし、上述した**【問題】**のせいで、valueに正しい値が挿入できないのです。すなわち、
17
+ しかし、上述した**【問題】**のせいで、➁複製画像srcを取得できないのです。
23
18
 
24
- **表示中の画像srcでなく、１枚目の画像srcが取得されてしまう**せいで、「画像neko2」を複製しても、「画像neko1」のvalueが挿入されてしまう。ということです。
19
+ 具体的には、
25
20
 
21
+ **複製画像srcでなく、スライダーの１枚目にある画像srcが取得されてしまうのです。**
22
+
26
23
  下記に、実際の動作、イメージ図、コードを貼っておきます。
27
24
 
28
25
  ■実際の動作↓

6

誤字にゃん

2018/03/01 23:57

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -15,13 +15,13 @@
15
15
 
16
16
  > スライダーで表示中の画像を「複製ボタン」で複製し、
17
17
 
18
- > その複製された画像のsrcをラジオボタンのvalueに挿入する。
18
+ > 複製画像srcを、ラジオボタンのvalueに挿入する。
19
19
 
20
20
  という機能になっています。
21
21
 
22
- しかし、上述した**【問題】**のせいで、valueが正しい値が挿入できないのです。
22
+ しかし、上述した**【問題】**のせいで、valueに正しい値が挿入できないのです。すなわち、
23
23
 
24
- （**表示中の画像srcでなく、１枚目の画像srcが取得されてしまう**せいで、neko2を複製してもneko1のvalueが挿入されてしまう。）
24
+ **表示中の画像srcでなく、１枚目の画像srcが取得されてしまう**せいで、「画像neko2」を複製しても、「画像neko1」のvalueが挿入されてしまう。ということです。
25
25
 
26
26
  下記に、実際の動作、イメージ図、コードを貼っておきます。
27
27
 
@@ -219,4 +219,7 @@
219
219
 
220
220
  以上です。
221
221
  長くなってしまってスミマセン。
222
+
223
+ 先述しましたが、原因は上記コード14行目```var src = $('.linkimg img').attr('src');```にあるようなので、ここをうまく修正して正しいsrcを取得したいです。
224
+
222
- よろしくお願いいたします。m(_ _)m
225
+ どうぞよろしくお願いいたします。m(_ _)m

5

画像の追加

2018/03/01 22:53

投稿

退会済みユーザー
title CHANGED
@@ -1,1 +1,1 @@
1
- 画像のscrを取得する方法（javascript）
1
+ 画像scrの取得がズレてしまう（javascript）
body CHANGED
@@ -1,53 +1,82 @@
1
- スライダー画像のsrcを取得する方法でつまずきました。
1
+ スライダーの画像srcを取得する方法でつまずいています。(>_<)
2
2
 
3
- ###■目的と問題
3
+ ###■目的と問題、対処すべき場所
4
+ **【目的】**
4
- 目的：複数枚のスライダーのうち、**表示中の画像のsrc**を取得したい。
5
+ 複数枚のスライダーのうち、**表示中の画像src**を取得したい。
5
6
 
7
+ **【問題】**
6
- 問題：**表示中の画像情報でなく、１枚目の画像のsrcが取得されてしまう。**
8
+ **表示中の画像srcでなく、１枚目の画像srcが取得されてしまう。**
7
9
 
10
+ **【対処すべき場所】**
11
+ 下記コード14行目```var src = $('.linkimg img').attr('src');```が原因です。どうやらここでsrcが取得できていない様子。
12
+
8
13
  ###■現状
9
- 現状の機能ですが、
14
+ 改めて現状の機能ですが、
10
15
 
11
- スライダーで表示中の画像を「複製ボタン」で複製し、
16
+ > スライダーで表示中の画像を「複製ボタン」で複製し、
12
17
 
13
- その複製された画像のsrcをラジオボタンのvalueに挿入する。
18
+ > その複製された画像のsrcをラジオボタンのvalueに挿入する。
14
19
 
15
20
  という機能になっています。
16
21
 
17
- しかし、上述した問題（**表示中の画像情報でなく、１枚目の画像のsrcが取得されてしまう。**）が発生しているために、valueが常に「neko1」という１枚目の画像になってしまうのです。
22
+ しかし、上述した**【問題】**のせいで、valueが正しい値が挿入できないのです。
18
23
 
19
- ・実際の動作↓
20
- [https://jsfiddle.net/ztyewrLq/1/](https://jsfiddle.net/ztyewrLq/1/)
24
+ （**表示中の画像srcでなく、１枚目の画像srcが取得されてしまう**せいで、neko2を複製してもneko1のvalueが挿入されてしまう。）
21
25
 
26
+ 下記に、実際の動作、イメージ図、コードを貼っておきます。
27
+
28
+ ■実際の動作↓
29
+ [https://jsfiddle.net/3pe0j501/3/](https://jsfiddle.net/3pe0j501/3/)
30
+
31
+ ■イメージ図↓
32
+ ![イメージ説明](94423060cb9db8a4803b83416de581d7.jpeg)
33
+
22
- ・そのコード↓
34
+ ■そのコード↓
23
35
  ```html
24
36
  <!-- 【スライダー】 -->
37
+ <p class="func">▼画像スライダー</p>
25
- ▼画像スライダー<br>
38
+ <section id="AB">
26
39
  <section id="A">
27
40
  <div class="slider">
28
- <div class="slideSet">
41
+ <div class="slideSet">
42
+
29
43
  <div class="slide">neko1<img src="http://example.com/wp-content/themes/theme-child/images/neko1.jpg" class="img"></div>
44
+
30
45
  <div class="slide">neko2<img src="http://example.com/wp-content/themes/theme-child/images/neko2.jpg" class="img"></div>
46
+
31
47
  </div>
32
48
  </div>
33
49
  <div class="btn">複製ボタン</div>
34
50
  </section>
35
51
 
52
+ <section id="B">
53
+ <div class="slider">
54
+ <div class="slideSet">
55
+
56
+ <div class="slide">inu1<img src="http://example.com/wp-content/themes/theme-child/images/inu1.jpg" class="img"></div>
57
+
58
+ <div class="slide">inu2<img src="http://example.com/wp-content/themes/theme-child/images/inu2.jpg" class="img"></div>
59
+
60
+ <div class="slide">inu3<img src="http://example.com/wp-content/themes/theme-child/images/inu3.jpg" class="img"></div>
61
+
62
+ </div>
63
+ </div>
64
+ <div class="btn">複製ボタン</div>
65
+ </section>
66
+ </section>
67
+
36
68
  <!-- 【複製画像】 -->
37
- ▼画像を複製<br>
69
+ <p class="func">▼複製画像</p>
38
70
  <div class="linkimg"></div>
39
71
 
40
- <hr>
72
+ <!-- 【ラジオvalue連動】 -->
73
+ <p class="ques">▼valueを複製画像のファイル名にしたい</p>
74
+ <input class='abc' type=radio value='複製ボタンクリック前' checked><span>value=</span><span id="output"></span>
41
75
 
42
- <!-- 【ラジオvalue連動】 -->
43
- ▼問題の場所<br>
44
- <input class='abc' type=radio value='xxx' checked>
45
- <p>目的：ラジオボタンのvalueを、「複製ボタンを押したときに表示されていた画像（複製された画像）」のファイル名へと変更したい。</p>
46
- <p>問題：neko2の画像を複製した場合でも、valueはneko1になってしまう。</p>
47
76
  ```
48
77
 
49
78
  ```javascript
50
- //ボタンクリックしたときの機能
79
+ ////ボタンクリックしたときの機能
51
80
  (function($){
52
81
  $(document).ready(function(){
53
82
 
@@ -69,9 +98,14 @@
69
98
  });
70
99
  })(jQuery);
71
100
 
101
+ ////検証のためのvalue表示
102
+ var target = document.getElementsByClassName("abc")[0];
103
+ var output = document.getElementById("output");
104
+ setInterval(function(){
105
+ output.innerHTML = target.value;
106
+ },10);
72
107
 
73
-
74
- //スライダー機能
108
+ ////スライダー機能
75
109
  (function(){
76
110
 
77
111
  // 初期設定
@@ -124,7 +158,65 @@
124
158
 
125
159
  }());
126
160
  ```
161
+ ```css
162
+ .slide,
163
+ .linkimg {
164
+ width: 100px;
165
+ height: 50px;
166
+ border: 1px solid #888;
167
+ }
168
+ #AB {
169
+ display: flex;
170
+ }
171
+ #A, #B {
172
+ margin: 0 20px 0 0px;
173
+ }
174
+ img {
175
+ width: 100px;
176
+ height: 50px;
177
+ background: #65beff;
178
+ }
179
+ .btn {
180
+ background: #0a7cff;
181
+ width: 100px;
182
+ border-radius: 10px;
183
+ color: #FFF;
184
+ font-weight: bold;
185
+ text-align: center;
186
+ margin: 10px 0 0px 0;
187
+ cursor: pointer;
188
+ }
189
+ .func {
190
+ background: #ddd;
191
+ padding: 5px;
192
+ }
193
+ .ques {
194
+ background: #FF6565;
195
+ padding: 5px;
196
+ }
127
197
 
198
+ .slideSet > div {
199
+ width: 100px;
200
+ height: 50px;
201
+ box-sizing: border-box;
202
+ }
203
+
204
+ .slide {
205
+ float: left;
206
+ }
207
+
208
+ .slideSet {
209
+ position: absolute;
210
+ }
211
+
212
+ .slider {
213
+ width: 100px;
214
+ height: 50px;
215
+ overflow: hidden;
216
+ position: relative;
217
+ }
218
+ ```
219
+
128
220
  以上です。
129
221
  長くなってしまってスミマセン。
130
222
  よろしくお願いいたします。m(_ _)m

4

誤字っぴ

2018/03/01 22:49

投稿

退会済みユーザー
title CHANGED
@@ -1,1 +1,1 @@
1
- 画像のscrを取得するjavascript
1
+ 画像のscrを取得する方法（javascript）
body CHANGED
File without changes

3

タイトル変更

2018/03/01 13:33

投稿

退会済みユーザー
title CHANGED
@@ -1,1 +1,1 @@
1
- スライダーの画像情報を取得する方法
1
+ 画像のscrを取得するjavascript
body CHANGED
@@ -1,20 +1,20 @@
1
- スライダーの画像情報を取得する方法で躓いています。
1
+ スライダー画像のsrcを取得する方法でつまずきました。
2
2
 
3
3
  ###■目的と問題
4
- 目的：複数枚のスライダーのうち、**表示中の画像情報**を取得したい。
4
+ 目的：複数枚のスライダーのうち、**表示中の画像のsrc**を取得したい。
5
5
 
6
- 問題：**表示中の画像情報でなく、１枚目の画像情報が取得されてしまう。**
6
+ 問題：**表示中の画像情報でなく、１枚目の画像のsrcが取得されてしまう。**
7
7
 
8
8
  ###■現状
9
9
  現状の機能ですが、
10
10
 
11
11
  スライダーで表示中の画像を「複製ボタン」で複製し、
12
12
 
13
- その複製された画像情報をラジオボタンのvalueに挿入する。
13
+ その複製された画像のsrcをラジオボタンのvalueに挿入する。
14
14
 
15
15
  という機能になっています。
16
16
 
17
- そこで挿入するvalueについて、上述した問題（**表示中の画像情報でなく、１枚目の画像情報が取得されてしまう。**）が発生しているために、valueが常に「neko1」になってしまうのです。
17
+ しかし、上述した問題（**表示中の画像情報でなく、１枚目の画像のsrcが取得されてしまう。**）が発生しているために、valueが常に「neko1」という１枚目の画像になってしまうのです。
18
18
 
19
19
  ・実際の動作↓
20
20
  [https://jsfiddle.net/ztyewrLq/1/](https://jsfiddle.net/ztyewrLq/1/)

2

「２枚のスライダー」を「複数枚のスライダー」に変更

2018/03/01 09:00

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -1,7 +1,7 @@
1
1
  スライダーの画像情報を取得する方法で躓いています。
2
2
 
3
3
  ###■目的と問題
4
- 目的：２枚のスライダーのうち、**表示中の画像情報**を取得したい。
4
+ 目的：複数枚のスライダーのうち、**表示中の画像情報**を取得したい。
5
5
 
6
6
  問題：**表示中の画像情報でなく、１枚目の画像情報が取得されてしまう。**
7
7
 

1

誤字

2018/03/01 04:52

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -1,9 +1,9 @@
1
1
  スライダーの画像情報を取得する方法で躓いています。
2
2
 
3
3
  ###■目的と問題
4
- 目的：２枚のスライダーのうち、**表示中の画像情報**を取得したいです。
4
+ 目的：２枚のスライダーのうち、**表示中の画像情報**を取得したい。
5
5
 
6
- 問題：**表示中の画像でなく、１枚目の画像情報**が取得されてしまいます。
6
+ 問題：**表示中の画像情報でなく、１枚目の画像情報が取得されてしまう。**
7
7
 
8
8
  ###■現状
9
9
  現状の機能ですが、
@@ -14,7 +14,7 @@
14
14
 
15
15
  という機能になっています。
16
16
 
17
- そこで挿入するvalueについて、上述したような問題（表示中の画像でなく、１枚目の画像情報が取得されてしまう問題）が発生しているために、valueが常に「neko1」になってしまうのです。
17
+ そこで挿入するvalueについて、上述した問題（**表示中の画像情報でなく、１枚目の画像情報が取得されてしまう。**）が発生しているために、valueが常に「neko1」になってしまうのです。
18
18
 
19
19
  ・実際の動作↓
20
20
  [https://jsfiddle.net/ztyewrLq/1/](https://jsfiddle.net/ztyewrLq/1/)