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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

11795閲覧

画像ファイル名の取得方法

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/02/28 20:52

編集2018/02/28 21:32

###■画像ファイル名がほしい
画像ファイル名をラジオボタンのvalueに挿入したい。

のですが、次のjavascriptではうまくできません。

javascript

1<script> 2//ボタンクリックしたら 3$(".hukusei").click(function(){ 4 5//そのimgのnameをとってきて 6var src = $(this).parent().find('img').attr('name'); 7 8//abcのvalueを変更してね 9document.getElementsByClassName("abc")[0].value = checked.value; 10 11}); 12</script>

###■対象の画像
尚、画像というのは次のように「ボタンをクリックしたときにcloneされる画像(.linkimgに入る画像)」です。

・実際の動作↓
https://jsfiddle.net/zq9949k5/

・そのコード↓

html

1<!-- 【画像A】 --> 2<section id="A"> 3 <div class="slider"> 4 <img src="http://bit.ly/2sNLCTb" class="img"> 5 </div> 6 <div class="hukusei">ボタン</div> 7</section> 8 9<!-- 【画像B】 --> 10<section id="A"> 11 <div class="slider"> 12 <img src="http://bit.ly/2oySzSB" class="img"> 13 </div> 14 <div class="hukusei">ボタン</div> 15</section> 16 17<!-- 【複製画像】 --> 18<p>▼▼ここに複製▼▼</p> 19<div class="linkimg"></div> 20 21<!-- 【ラジオvalue連動】 --> 22<p>▼▼このvalueが画像ファイル名と連動してほしい▼▼</p> 23<input class='abc' type=radio value='xxx' checked> 24 25<!-- 【画像複製のjs】 --> 26<script> 27(function($){ 28$(document).ready(function(){ 29 $(".hukusei").click(function(){ 30 var cloneObject = $(this).parent().find(".slider").clone(); 31 // console.log(cloneObject[0]); 32 $(".linkimg").empty(); 33 cloneObject.appendTo($(".linkimg")); 34 cloneObject.find("input").hide(); 35 }) 36}); 37})(jQuery); 38</script>

たとえば、画像ファイルが「http://example.com/wp-content/themes/simplicity/animalimg/nekochan1.jpg」だったら、「nekochan1」というvalueになってほしい。ということです。

よろしくお願いいたします。m(_ _)m

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

var cloneObject = $(this).parent().find(".slider").clone(); //jsfiddleで以下の行を追加でimg srcの値をconsole logで確認可能 console.log(cloneObject.children('img')[0].src);

選択された画像A or 画像Bのsrcの値を取得したいという話であれば、これで取得可能かと思います。
質問の趣旨を読み間違えていたらすみません。

追記

コード

var url = 'http://example.com/wp-content/themes/simplicity/animalimg/nekochan1.jpg'; var splittedUrl = url.split('/') console.log('/で分割されたurl文字列の配列: ', splittedUrl); console.log('画像ファイル名(拡張子有り): ', splittedUrl[splittedUrl.length - 1]); console.log('.で分割されたファイル名の配列: ', splittedUrl[splittedUrl.length - 1].split('.')) console.log('画像ファイル名(拡張子無し): ', splittedUrl[splittedUrl.length - 1].split('.')[0])

実行結果

/で分割されたurl文字列の配列: [ 'http:', '', 'example.com', 'wp-content', 'themes', 'simplicity', 'animalimg', 'nekochan1.jpg' ] 画像ファイル名(拡張子有り): nekochan1.jpg .で分割されたファイル名の配列: [ 'nekochan1', 'jpg' ] 画像ファイル名(拡張子無し): nekochan1

選択された画像のsrcの値の取得方法と取得した画像のパスから拡張子を除いたファイル名を抜き出す方法は上記の通りですので、あとはvalueへファイル名をセットするだけです。(そこはご自身で対応できるのだと思いますので省略)

尚、「image.43824233232.jpg」のようなファイル名の中に「.」が複数ある場合は想定されていませんので、そういったファイル名を扱う場合は工夫してみてください。

投稿2018/02/28 21:20

編集2018/02/28 21:41
HayatoKamono

総合スコア2415

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/02/28 21:26

あと、コンソールに出すのではなくて、valueを変更したいのです。 また何か思いつくことがあればどんなヒントでもくださいませ。
HayatoKamono

2018/02/28 21:27

掲載コードを例にすると、 <div class="slider"> <img src="http://bit.ly/2sNLCTb" class="img"> </div> のsrcがhttp://example.com/wp-content/themes/simplicity/animalimg/nekochan1.jpgだった場合に、nekochan1の部分だけを取りたいということですか?
退会済みユーザー

退会済みユーザー

2018/02/28 21:28

はい。仰るとおりです。そこだけを取って、valueにいれたいのです。可能でしょうか…?
退会済みユーザー

退会済みユーザー

2018/02/28 22:34

おおお、最高です。そうやって分割して、好きなところを出力できるのですね。 ご回答ありがとうございます。無事できました。 よい一日を(^_-)-☆
退会済みユーザー

退会済みユーザー

2018/03/01 01:13 編集

ありがとうございます。
退会済みユーザー

退会済みユーザー

2018/03/01 02:21 編集

いえいえ、本当にありがとうございます。 ↑さっきから何か?というと、実は追加でできないところを質問し、結局自己解決したため、質問をお礼に書き換えている。という次第です。笑 失礼いたしましたm(_ _)m
退会済みユーザー

退会済みユーザー

2018/03/02 00:52

おはようございます。 その後、画像スライダーにしてみたところ、srcが取得できなくなってしまいました。 https://teratail.com/questions/115612 別質問ですので、お手すきの折の、暇で仕方ないときにでも、ご覧いただけましたら幸いです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問