JavaScriptで反映させているテキスト部分をリンクにする方法

質問

いつもお世話になっています！

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

yyr446 · ベストアンサー

desc:内にHTMLが入ると、全てのJavaScriptが動作しなくなり、画像もDescriptionも表示されません(TдT)
なら、
テキストの中に含めるHTMLタグを
'<a href="//hoge.hoge/fuga.htm">Granite base</a>'
と書く代わりに
'$lt;a href=&quot;//hoge.hoge/fuga.htm&quot;&gt;Granite base$lt;/a&gt;'
としてみたらどうです。
情報が小出しですが、
function ShowSubImage(n)は問題無い様に見受けられます。
前の画像をフェードアウトさせてn番目の画像をフェードインさせ、同時にタイトルと説明の<div>要素を書き換えているのですね。

お礼

度々本当にありがとうございます！！！

どうやら、私の書き方で、
hogehoge<br><a href="hoge@hoge.com">hogehoge</a>
となっており・・・。
この<br>を<br />とすることで解消したようです・・・。
本当にご迷惑をおかけしました！！！

$ltで<　　&gt;で>　は初めてしました！！
勉強になりました。

ありがとうございます！

回答No.6

amane123

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

yyr446

書き間違え訂正
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

yyr446

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

神崎 渉瑠（@taloo）

> $("DIV.image-desc").text()
この書き方を提供しているライブラリに、innerTextまたはtextContentではなく、
innerHTMLを書き出すメソッドがあれば、それを使用してみてはいかがでしょうか。

その上で、
> SubImages[MainPos][SubPos].desc
このプロパティにHTMLを書けば、そのままHTMLとして出力されると思います。

DOM的にはHTMLデータ（descプロパティを文字列として)を解析して、
テキストノード、A要素（と、それに内包するテキストノード)、テキストノードと１つ１つ生成して挿入するのがベストでしょうけど、
テンプレートエンジンでないと、そこまでするのは無理があると思います。

お礼

ご回答ありがとうございます！
やはり１つ1つがベストですよね・・・。

今回はなんとかしのげたので、（私の盆ミスでした・・・。本当にご迷惑をお掛けしました！！）
時間のあるときにぜひ、個別に生成するようにします！

本当にありがとうございました！

回答No.1

yyr446

提示されている情報が少ないですが、
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' }]
が構文的におかしいような気がするのですが、自分で書いたのですか？
それともソースから適当に部分的にコピー貼り付けしただけですか？

いずれにせよ、うまくいかないのは、文字列のクォテーションのエスケープ処理がまずいからか、{}[]の入れ子構文が間違っているからではないでしょうか？