![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
いつもお世話になっています!
JavaScriptでの質問なのですが、
下記のように、JavaScriptを記載し、
HTML内にテキストが表示されるようにしています。
var SubImages = [
/* 0 Bullet Column */
[{ desc: 'Height: 83", Diameter (at base): 14"', img: '1.jpg' },
{ desc: 'Shown in a possible setting', img: '3.jpg' },
{ desc: 'Granite base', img: '6.jpg' }]
function() {
//Change description.
$("DIV.image-desc").text(SubImages[MainPos][SubPos].desc);
$("DIV.image-title").show();
$("DIV.image-desc").show();
}
これでdesc:で指定したテキストがHTML内に書き出されているのですが、
テキストの中の一部分にリンクを付けたい、
という注文がはいりました・・・。
その場合、どのようにすればいいのでしょう?
desc:内に直接HTMLで書き込んでも、反応しませんでした。
どなたかご存知の方、宜しくお願いします!!!
No.5ベストアンサー
- 回答日時:
desc:内にHTMLが入ると、全てのJavaScriptが動作しなくなり、画像もDescriptionも表示されません(TдT)
なら、
テキストの中に含めるHTMLタグを
'<a href="//hoge.hoge/fuga.htm">Granite base</a>'
と書く代わりに
'$lt;a href="//hoge.hoge/fuga.htm">Granite base$lt;/a>'
としてみたらどうです。
情報が小出しですが、
function ShowSubImage(n)は問題無い様に見受けられます。
前の画像をフェードアウトさせてn番目の画像をフェードインさせ、同時にタイトルと説明の<div>要素を書き換えているのですね。
度々本当にありがとうございます!!!
どうやら、私の書き方で、
hogehoge<br><a href="hoge@hoge.com">hogehoge</a>
となっており・・・。
この<br>を<br />とすることで解消したようです・・・。
本当にご迷惑をおかけしました!!!
$ltで< >で> は初めてしました!!
勉強になりました。
ありがとうございます!
No.6
- 回答日時:
desc:内に直接HTMLで書き込んだ上で、
$("DIV.image-desc").text(SubImages[MainPos][SubPos].desc);
ではなく、
$("DIV.image-desc").html(SubImages[MainPos][SubPos].desc);
にすれば、<a>はリンクとして表示できます。
ご回答ありがとうございます!!
どうやら、私の書き方で、
hogehoge<br><a href="hoge@hoge.com">hogehoge</a>
となっており・・・。
この<br>を<br />とすることで解消したようです・・・。
本当にご迷惑をおかけしました!!!
.textではなく、.htmlでもいけるのですね!
新たな発見です!!
ありがとうございました!
No.4
- 回答日時:
書き間違え訂正
var SubImages
= [
/* 0 Bullet Column */
[
{ desc: 'Height: 83", Diameter (at base): 14"', img: '1.jpg' },
{ desc: 'Shown in a possible setting', img: '3.jpg' },
{ desc: '<a href="//hoge.hoge/fuga.htm">Granite base</a>', img: '6.jpg' }
]
[
......
]
..繰り返し
];
と定義があったら、
function() {
//Change description.
$("DIV.image-desc").text(SubImages[0][3].desc);
$("DIV.image-title").show();
$("DIV.image-desc").show();
}
ですね、配列変数SubImagesの中身は、
alert (SubImages[0][1].desc); // Height: 83", Diameter (at base): 14"
alert (SubImages[0][1].img); // 1.jpg
alert (SubImages[0][2].desc); // Shown in a possible setting
alert (SubImages[0][2].img); // 3.jpg
alert (SubImages[0][3].desc); // <a href="//hoge.hoge/fuga.htm">Granite base</a>
alert (SubImages[0][3].img); // 6.jpg
...............
とアクセス出来ます。
No.3
- 回答日時:
No1回答者です。
もしBullet Columnのテキストにリンクを付けたいなら、
var SubImages
= [
/* 0 Bullet Column */
[
{ desc: 'Height: 83", Diameter (at base): 14"', img: '1.jpg' },
{ desc: 'Shown in a possible setting', img: '3.jpg' },
{ desc: '<a href="//hoge.hoge/fuga.htm">Granite base</a>', img: '6.jpg' }
で
function() {
//Change description.
$("DIV.image-desc").text(SubImages[0][3].desc);
$("DIV.image-title").show();
$("DIV.image-desc").show();
}
]
/*
......
*/
];
ですね、配列変数SubImagesの中身は、
alert (SubImages[0][1].desc); // Height: 83", Diameter (at base): 14"
alert (SubImages[0][1].img); // 1.jpg
alert (SubImages[0][2].desc); // Shown in a possible setting
alert (SubImages[0][2].img); // 3.jpg
alert (SubImages[0][3].desc); // <a href="//hoge.hoge/fuga.htm">Granite base</a>
alert (SubImages[0][3].img); // 6.jpg
...............
とアクセス出来ます。
この回答への補足
ご回答ありがとうございます!!
ご察しの通り、使用しているのはJ-Queryで、そこに
独自のJavaScruptを組み合わせています。
早速上記の方法で試してみたのですが、
desc:内にHTMLが入ると、全てのJavaScriptが動作しなくなり、
画像もDescriptionも表示されません(TдT)
下記はJ-QueryのJavaScriptですが、ここに問題があるのでしょうか?
function ShowSubImage(n) {
if (n >= SubImages[MainPos].length) {
return;
}
SubPos = n;
ShowSubNo()
$("DIV.image-title").hide();
$("DIV.image-desc").hide();
//Change the image using fade-out and fade-in effects.
var img = $("#slideshow-adv span a");
img.fadeOut("fast",
function() {
img.empty();
img.append(SubImages[MainPos][SubPos].imageObj);
img.fadeIn("fast",
function() {
//Change description.
$("DIV.image-desc").text(SubImages[MainPos][SubPos].desc);
$("DIV.image-title").show();
$("DIV.image-desc").show();
}
);
}
);
}
No.2
- 回答日時:
> $("DIV.image-desc").text()
この書き方を提供しているライブラリに、innerTextまたはtextContentではなく、
innerHTMLを書き出すメソッドがあれば、それを使用してみてはいかがでしょうか。
その上で、
> SubImages[MainPos][SubPos].desc
このプロパティにHTMLを書けば、そのままHTMLとして出力されると思います。
DOM的にはHTMLデータ(descプロパティを文字列として)を解析して、
テキストノード、A要素(と、それに内包するテキストノード)、テキストノードと1つ1つ生成して挿入するのがベストでしょうけど、
テンプレートエンジンでないと、そこまでするのは無理があると思います。
ご回答ありがとうございます!
やはり1つ1つがベストですよね・・・。
今回はなんとかしのげたので、(私の盆ミスでした・・・。本当にご迷惑をお掛けしました!!)
時間のあるときにぜひ、個別に生成するようにします!
本当にありがとうございました!
No.1
- 回答日時:
提示されている情報が少ないですが、
function() {
//Change description.
$("DIV.image-desc").text(SubImages[MainPos][SubPos].desc);
$("DIV.image-title").show();
$("DIV.image-desc").show();
}
から察するに、prototype.js系jQuery等のライブラリーをお使いですね、
何のライブラリーでしょうか?
$("DIV.image-desc")が要素のセレクターで、text()メソッドで値をセットしshow()メソッドで表示しているのでしょう。
SubImages[MainPos][SubPos]が表示させるテキストが格納されている配列変数です。
変数MainPosと変数SubPosには何が格納されてますか?
投稿されている
var SubImages = [
/* 0 Bullet Column */
[{ desc: 'Height: 83", Diameter (at base): 14"', img: '1.jpg' },
{ desc: 'Shown in a possible setting', img: '3.jpg' },
{ desc: 'Granite base', img: '6.jpg' }]
が構文的におかしいような気がするのですが、自分で書いたのですか?
それともソースから適当に部分的にコピー貼り付けしただけですか?
いずれにせよ、うまくいかないのは、文字列のクォテーションのエスケープ処理がまずいからか、{}[]の入れ子構文が間違っているからではないでしょうか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript javascriptで変数を組み込みたい 2 2023/01/13 09:52
- Perl RSSにdiv,ul classを付けたいのですがどのようにつけるのかわからないです 2 2022/03/28 01:53
- CGI perlで書いたcgiでsqliteの使い方を教えてください 2 2023/05/08 21:29
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- JavaScript 空白で入力フォームのボタンをクリックしたら、ブラウザの上部からjavascriptで 表示されるアラ 1 2022/05/20 11:16
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
JavaScriptで変更した属性の元...
-
lightboxのタイトル部分にリン...
-
【OpenCV】二値画像後、白の部...
-
JavaScriptで反映させているテ...
-
どこが間違えているのか分かり...
-
更新ごとに重複しない画像を5枚...
-
JavaScriptの記述方法
-
$(this)を変数に入れないと動作...
-
複数画像のランダム複数表示(...
-
OpenCV での画素値の比較について
-
外部javascriptの重複を防ぐには
-
nodejsの画像表示は特別なこと...
-
プログラムの上手な書き方は?
-
Accessible News Sliderついて
-
どの<li><a> が押されたか判別...
-
マウスオーバーのメニューについて
-
クリックで背景変更するタグ
-
「jQuery」アコーディオンメニ...
-
jqueryのsortableで一部ソート...
-
画像の表示位置
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
JavaScriptで変更した属性の元...
-
MFCで画像を表示させているので...
-
複数画像のランダム複数表示(...
-
Vb.net2005での画像の合成方法
-
画像が表示でnull; this.src
-
外部javascriptの重複を防ぐには
-
外部ファイルにしたら文字化け...
-
【OpenCV】二値画像後、白の部...
-
error LNK2019 未解決のシンボ...
-
こんにちは、javascriptにてボ...
-
条件分岐でキーが入力されてい...
-
ダイアログから画像ファイルは...
-
jqueryスライドショーをストッ...
-
onclickで画面が固まる・・・ら...
-
OpenCV での画素値の比較について
-
jsでサムネイルを拡大表示 複...
-
imgボタンにfocusの当て方
-
ラズパイでno module named zbar
-
HTMLからimgのsrcのみを正規表...
-
Javaの正規表現でimgタグのalt...
おすすめ情報