0

私は初心者の Web デザイナーで、あるものを別のものにリンクする方法を知る必要があります。問題は、サイトが更新されるたびに異なる引用符を変更していることです。また、別の div タグにある画像でも同じことを行う必要があります。それらをリンクする必要があるのは、画像を引用と調整する必要があるためです. 例: 画像 0 で 0 を引用します。

JavaScriptコードは次のとおりです。

var quotes=new Array();
quotes[0] = "text1";
quotes[1] = "Text2";
quotes[2] = "text3";
quotes[3] = "text4";

var q = quotes.length;
var whichquote=Math.round(Math.random()*(q-1));
function showquote(){document.write(quotes[whichquote]);}
showquote();

そして、これはJavaScriptテキストにあるコードです:

<script language="javascript" type="text/javascript" src="quotes.js"></script>
4

2 に答える 2

7

そのコードに関するいくつかのメモ。これらを誤解しないでください。JavaScript は初めてです。人に指摘してもらうことは、私たちが学ぶ 1 つの方法です。

  1. を使用する理由はほとんどありませんnew Array。配列リテラルを使用します。この場合：

    var quotes = [
    "text1",
    "Text2",
    "text3",
    "text4"
];

  2. このlanguage属性は 90 年代に廃止され、typeonのデフォルト値はscriptですtext/javascript。必要なのはそれだけ<script src="..."></script>です。

  3. 乱数が間違っています。(包括的) から(排他的Math.random) までの数値を返すため、数値から 1 を引いた数値ではなく、画像の数を乗算するだけです。01

  4. document.write避けるのが一番です。現代の Web プログラミングでこれを使用する理由はほとんどありません。

あなたが説明したことを実行する方法の 1 つを次に示します。ライブソース

(エントリが 2 つしかないため、何度も更新する必要があります。同じエントリが表示される可能性はかなり高くなります。)

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Random Text Plus Image</title>
</head>
<body>
  <div id="quote"></div>
  <script>
    (function() {
      var quotes = [
        {
          text: "text1",
          img:  "http://i.stack.imgur.com/FqBE6.jpg?s=32&g=1"
        },
        {
          text: "text2",
          img:  "https://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=32&d=identicon&r=PG",
        }
      ];
      var quote = quotes[Math.floor(Math.random() * quotes.length)];
      document.getElementById("quote").innerHTML =
        '<p>' + quote.text + '</p>' +
        '<img src="' + quote.img + '">';
    })();
  </script>
</body>
</html>

私がそこでしたこと：

  • <div id="quote"></div>引用符と画像を保持する要素 the を出力します。これは の代わりですdocument.write。

  • 配列リテラルを使用しましたが、配列リテラルにはオブジェクトリテラル (などを含む{...}ものtext: "text1") が含まれています。したがって、私の配列にはオブジェクトが含まれており、各オブジェクトにはプロパティtext(その引用のテキスト) とimg(使用する画像の URL) があります。

  • ランダムなものを修正しました。

  • テキスト (HTML マークアップと想定) と画像を出力するときは、コードの上innerHTMLのquote divI output を設定して行います。

  • すべてのコードを囲み関数に入れ、すぐに呼び出します。これにより、グローバル変数が作成されなくなります。

お役に立てれば。

于 2013-07-13T17:43:15.763 に答える
0

次のような html があるとします。

<div id="quote"></div>
<div>
    <img class="image" src="http://www.placehold.it/100x50&text=1" />
    <img class="image" src="http://www.placehold.it/100x50&text=2" />
    <img class="image" src="http://www.placehold.it/100x50&text=3" />
    <img class="image" src="http://www.placehold.it/100x50&text=4" />
</div>

とcss

.image {
   display: none;
}

showquote次に、関数で次のようなことを行う必要があります。

function showquote(){
   document.getElementById('quote').innerHTML = quotes[whichquote];
   document.getElementsByTagName('img')[whichquote].style.display="block";
}

ここでフィドルを参照してください： http://jsfiddle.net/fYPY7/

于 2013-07-13T17:42:07.743 に答える