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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

464閲覧

jsでファイル名をappendするとスペースに変わってしまう。

yuki55snowman

総合スコア6

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2023/05/10 02:04

編集2023/05/10 12:59

実現したいこと

ファイルパスを取得すること

ここに実現したいことを箇条書きで書いてください。

  • ファイルパスの/がスペースになってしまう。これをファイルパスのまま取得したい

前提

ここに質問の内容を詳しく書いてください。

<ul class="portfolio-type-list portfolio-type-1"> <!-- liをjsで追加している --> </ul>
var picture = $(item).find('img').text() var inHtml = "<li class='test'>" + "<a href='/test/test/test.html?id=" + test + "'>" + "<span class='test' style='background-image: url('" + picture + "')></span>" + "<p>" + test + "</p>" + "</a>" + "</li>" console.log(inHtml) //「メモ:」の後に引数のテキストを追加 $('ul.portfolio-type-1.portfolio-type-1').append(inHtml)
//コンソールで出力すると、'/file/test-9e549aa21136aa01072caf3aecc7e08db1bf87b2.jpg'と表示されている。 <li class='test'><a href='test'><span class='test' style='background-image: url('/file/test-fdsfsafhsfhlkfjsflksdjfjkdskfjs.jpg')></span><p>木の葉モール橋本</p></a></li>
//なぜかスペースに変換されている。html側でappendした側 ' file test-fjsjafasklfjdsfdsfjkasfjksdkfsjafslkfjakj.jpg

発生している問題・エラーメッセージ

特になし

エラーメッセージ

なし

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

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

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

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

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

m.ts10806

2023/05/10 02:39 編集

そもそも以下でシンタックスエラー出てます。 var inHtml = "<li class='test"'>" + "<a href='/test/test/test.html?id=" + test + "'>" + "<span class='test' style='background-image: url('" + picture + "')></span>" + "<p>" + test + "</p>" + "</a>" + "</li>"
yuki55snowman

2023/05/10 03:20

すいません、仕事のソースなので、情報を伏せています。その際に、変になっていました。 他の回答者さんが、言ってくれていますが、修正しました。
guest

回答1

0

ベストアンサー

javascript

1var inHtml = "<li class='test"'>" 2↓↓↓ 3var inHtml = "<li class='test'>" 4 5+ "<span class='test' style='background-image: url('" + picture + "')></span>" 6↓↓↓ 7+ "<span class='test' style='background-image: url(&quot;" + picture + "&quot;)'></span>"

参考

javascript

1<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script> 2<script> 3$(function(){ 4var picture = '/file/test-9e549aa21136aa01072caf3aecc7e08db1bf87b2.jpg'; 5var test=123; 6var inHtml = "<li class='test'>" 7 + "<a href='/test/test/test.html?id=" + test + "'>" 8 + "<span class='test' style='background-image: url(&quot;" + picture + "&quot;)'></span>" 9 + "<p>" + test + "</p>" 10 + "</a>" 11 + "</li>"; 12 $('ul.portfolio-type-1.portfolio-type-1').append($(inHtml)); 13}); 14</script> 15<ul class="portfolio-type-list portfolio-type-1"> 16</ul>

投稿2023/05/10 02:37

編集2023/05/10 03:27
yambejp

総合スコア114572

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

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

yuki55snowman

2023/05/10 03:19

ご回答ありがとうございます。上記の変更をしましたが、span、pタグが消えました。 aタグのみ表示されている状態です。
yambejp

2023/05/10 03:29 編集

appendの仕方も対応が必要でしたね。 そこでつまっているのでなければおそらく何か勘違いされているのでしょう 参考までに応全文追記しておきました
yuki55snowman

2023/05/10 03:59

ありがとうございます。表示されました。クローズとさせていただいます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問