How do I display randomly-chosen text with an associated image?

问题

I'm a beginner web designer and I need to know how can I link one thing to another. The thing is that I'm making different quotes change every time the site refreshes. And I need to do the same thing with images that are located in a different div tag. The reason I need to link them is because the image needs to coordinate with the quote. For example: quote 0 with image 0.

Here is the javascript code:

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();

And this is the code that is located the javascript text:

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

回答1:

Some notes on that code. Don't take these the wrong way, you're new to JavaScript! Everyone was once, having people point things out is one way we learn.

There's almost never any reason to use new Array. Use an array literal. In this case:
```
var quotes = [
    "text1",
    "Text2",
    "text3",
    "text4"
];
```
The language attribute was deprecated in the 90's, and the default value of type on script is text/javascript. So just <script src="..."></script> is all you need.
Your random number is wrong. Math.random returns a number from 0 (inclusive) to 1 (exclusive), so you want to just multiply by the number of images, not the number minus one.
document.write is best avoided. There's very, very little reason to use it in modern web programming.

Here's one way to approach doing what you described: Live Example | Live Source

(You have to refresh it a lot, because it only has two entries, so you have pretty good odds of seeing the same one.)

<!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>

What I did there:

I output an element, the <div id="quote"></div>, to hold the quote and image. This is instead of the document.write.
I used an array literal, but my array literal contains object literals (the {...} things with text: "text1" and such in them). So my array contains objects, where each object has the properties text (the text of that quote) and img (the URL of the image to use).
I fixed the random thing.
When outputting the text (which I assume is HTML markup) and the image, I do that by setting innerHTML on the quote div I output above the code.
I put all of my code in an enclosing function that I call immediately. This prevents creating any global variables.

Hope this helps.

回答2:

Assuming you have something like the following 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>

and css

.image {
   display: none;
}

Then you need to do something like this in your showquote function:

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

See the fiddle here: http://jsfiddle.net/fYPY7/

来源：https://stackoverflow.com/questions/17632519/how-do-i-display-randomly-chosen-text-with-an-associated-image

标签

javascript

quotes

dynamic-linking

page-refresh