0

我是一名初学者网页设计师，我需要知道如何将一件事链接到另一件事。问题是每次网站刷新时我都会更改不同的报价。我需要对位于不同 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. 几乎没有任何理由使用new Array. 使用数组文字。在这种情况下：

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

  2. 该属性在 90 年代已language弃用，默认值为typeon 。所以这就是你所需要的。scripttext/javascript<script src="..."></script>

  3. 你的随机数是错误的。Math.random返回一个从0（包括）到1（排他）的数字，因此您只想乘以图像数量，而不是数字减一。

  4. document.write最好避免。在现代网络编程中使用它的理由非常非常少。

这是处理您所描述的事情的一种方法：Live Example | 直播源

（你必须经常刷新它，因为它只有两个条目，所以你很有可能看到相同的条目。）

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

我在那里做了什么：

  • 我输出一个元素 the<div id="quote"></div>来保存引用和图像。这是代替document.write.

  • 我使用了数组文字，但我的数组文字包含对象文字（其中的{...}东西text: "text1"）。所以我的数组包含对象，其中每个对象都有属性text（引用的文本）和img（要使用的图像的 URL）。

  • 我修复了随机的东西。

  • 在输出文本（我假设是 HTML 标记）和图像时，我通过在代码上方的 I 输出上进行设置来做到这innerHTML一点quote div。

  • 我把我所有的代码放在一个我立即调用的封闭函数中。这可以防止创建任何全局变量。

希望这可以帮助。

于 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 回答