ここから本文です

java script初心者です。テキストの表示に関して質問です。 先日、下記の質問を...

dro********さん

2016/7/2218:49:37

java script初心者です。テキストの表示に関して質問です。

先日、下記の質問をさせて頂きました。

http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1316165086...

いくつかWPでブログを運営しているのですが、
文字の表示指定をCSSなどで行わなくても大丈夫な場合と、
アドバイスして頂いた var texts = new Array …
など追記しただけでは表示がされない場合があります。


・画像の下にテキストを表示させる。
・テキストのHTMLは仮に <div class="jstext"> に記載する。

とした場合、どのような追記が必要になりますでしょう?
どなたか分かりやすくご教授頂けると助かりますm(_ _)m

閲覧数:
46
回答数:
1
お礼:
500枚

違反報告

ベストアンサーに選ばれた回答

ven********さん

2016/7/2410:08:37

おはこんばんにちゎ♪
詳細の返信、ありがとでした(^▽^*

やりたい事が分かった気がするので、回答しますね。
返信でもいいと思ったけど、
見づらくなりそうなので、再回答します♪


■■■ リストの管理について ■■■

まず、
シャッフルする画像、リンク先、テキストのリストだけど、
いまのやり方だと、
それぞれのリストが別々に管理されているので、
あとあと管理がしにくい気がします。

連想配列を使うと、
リストアイテムごとに、
画像、リンク先、テキストをセットにして管理できるので、
メンテナンスがしやすくなると思いますょ♪

連想配列とは、
「キー」と「値」をセットにしてを保持する、
データのセットのようなものです。
例えば、
名前「ひろし」、年齢「37」、趣味「独り酒」というデータを
"who" という名前の連想配列に入れて管理すると、
/────────
who = { "名前": "ひろし", "年齢": 37, "趣味": "独り酒" };
────────/
っていう感じになります。

今回かきだそうとしている、
画像、リンク先、テキストを連想配列にして、
それを、配列で管理するわけですね。
配列の名前を shuffleList とすれば、
/────────
var shuffleList = [
{ "src": "画像URL(1)", "href": "リンク先URL(1)", "text": "テキスト(1)" },
{ "src": "画像URL(2)", "href": "リンク先URL(2)", "text": "テキスト(2)" },
{ "src": "画像URL(3)", "href": "リンク先URL(3)", "text": "テキスト(3)" },
…,
{ "src": "画像URL(N)", "href": "リンク先URL(N)", "text": "テキスト(N)" }
]
────────/
っていう感じになります。
リストから値を取り出す時は、
例えば n 番目のアイテムの画像 URL であれば、
/────────
shuffleList[ n ].src
または
shuffleList[ n ][ "src" ]
────────/
のようにアクセスします。


■■■ 要素の書き出し ■■■

さて、
このリストを使ってランダムに番号を選び、
あとは書き出すだけなので、
以下のようになります。
/────────
var n = Math.floor( Math.random()*shuffleList.length );
document.write("<a href='"+shuffleList[ n ].href+"' target='_blank'>");
document.write("<img src='"+shuffleList[ n ].src+"' style='border:solid 1px #333;' width='300' >");
document.write("<div class='jstext'>"+shuffleList[ n ].text+"</div>");
document.write("</a>");
────────/

これで完了です*゜▽^)b'
この場合は、
/────────
<a href="~" target="blank">
<img src="~" style="border:solid 1px #333" width="300">
<div class="jstext">~</div>
</a>
────────/
ってなります。
/────────
<a href="~" target="blank">
<img src="~" style="border:solid 1px #333" width="300">
</a>
<div class="jstext">~</div>
────────/
にしたい場合は、
/────────
var n = Math.floor( Math.random()*shuffleList.length );
document.write("<a href='"+shuffleList[ n ].href+"' target='_blank'>");
document.write("<img src='"+shuffleList[ n ].src+"' style='border:solid 1px #333;' width='300' >");
document.write("</a>");
document.write("<div class='jstext'>"+shuffleList[ n ].text+"</div>");
────────/
のように入れ替えればイイだけですね♪


■■■ もう一つのやり方 ■■■

あと、
document.write() で書いてもいいのだけど、
DOM を使って要素を追加していく方法もあるので、
紹介しておきますねヽ(^-^*

まず、
コンテンツを書き出したい場所に <div> 要素などを置いておきます。
/────────
<div id="shuffle_content"></div>
────────/
そして、
この直後に <script> タグを配置して、
書き出すための Javascript を書いていきます。
/────────
<div id="shuffle_content"></div>
<script type="text/javascript">
</script>
────────/

リストの作成と、
ランダム番号の取得まではまったく同じですが、
要素を書き出すところで document.write() を使わず、
document.createElement() で要素オブジェクト elem を生成し、
それを親要素 parent に追加する、
っていう方法で書き出していきます。
/────────
var elem = document.createElement("要素名");
parent.appendChild( elem );
────────/
このコードは、
下記のように1本にまとめることも出来ます。
/────────
var elem = parent.appendChild( document.createElement("要素名") );
────────/

この方法の実施例が、以下のようになります*゜▽゜)o⌒☆
/────────
<div id="shuffle_content"></div>
<script type="text/javascript">
var shuffleList = [
{ "src": "画像URL(1)", "href": "リンク先URL(1)", "text": "テキスト(1)" },
{ "src": "画像URL(2)", "href": "リンク先URL(2)", "text": "テキスト(2)" },
{ "src": "画像URL(3)", "href": "リンク先URL(3)", "text": "テキスト(3)" },
…,
{ "img": "画像URL(n)", "href": "リンク先URL(n)", "text": "テキスト(n)" }
];
var n = Math.floor( Math.random()*shuffleList.length );
//----> 親要素を取得
var shuffle_content = document.getElementById("shuffle_content");
//----> 親ブロックに <a> を追加
var a = shuffle_content.appendChild( document.createElement("a") );
a.setAttribute( "href", shuffleList[ n ].href );
a.setAttribute( "target", "_blank" );
//----> <a> に <img> を追加
var img = a.appendChild( document.createElement("img") );
img.src = shuffleList[ n ].src;
img.width = 300;
img.style.border = "solid 1px #333";
//----> <a> に <div> を追加して、テキストを書き入れる
var jstext = a.appendChild( document.createElement("div") );
jstext.className = "jstext";
jstext.innerHTML = shuffleList[ n ].text;
</script>
────────/

この場合は、
/────────
<div id="shuffle_content">
<a href="~" target="blank">
<img src="~" style="border:solid 1px #333" width="300">
<div class="jstext">~</div>
</a>
</div>
────────/
っていう構造になります。これを
/────────
<div id="shuffle_content">
<a href="~" target="blank">
<img src="~" style="border:solid 1px #333" width="300">
</a>
<div class="jstext">~</div>
</div>
────────/
のようにしたい場合は、
/────────
var jstext = a.appendChild( document.createElement("div") );
────────/

/────────
var jstext =
shuffle_content.appendChild( document.createElement("div") );
────────/
に変えるだけです。


■■■ どっちがいいの? ■■■

どっちの方法でも大丈夫です。
document.write() の方が簡単な場合は document.write() でもいいし、
document.createElement() で追加する方が、
HTML の構造を管理しやすい場合はこっちを使うとイイと思います(^-^*

  • ven********さん

    2016/7/2410:14:18

    ちなみに、
    リストの連想配列、
    ソースを1行で書くと見づらい場合は、
    要所ゞで改行することも出来ます。
    /────────
    var shuffleList = [
    {
    "src": "画像URL(1)",
    "href": "リンク先URL(1)",
    "text": "テキスト(1)"
    },
    {
    "src": "画像URL(2)",
    "href": "リンク先URL(2)",
    "text": "テキスト(2)"
    },
    {
    "src": "画像URL(3)",
    "href": "リンク先URL(3)",
    "text": "テキスト(3)"
    },
    …,
    {
    "img": "画像URL(n)",
    "href": "リンク先URL(n)",
    "text": "テキスト(n)"
    }
    ];
    ────────/

    また、
    document.write() で長いコードを書き出す場合は、
    以下のようにすれば、
    ソースを見やすく書くことができます。
    /────────
    var code = ""
    + "~"
    + "~"
    + "~"

    + "~";
    document.write( code );
    ────────/

    ソースの書き方ワンポイントでしたヽ(^▽^*

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

この回答は投票によってベストアンサーに選ばれました!

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる