【问题标题】:how to separate two variables如何分离两个变量
【发布时间】:2015-01-30 16:41:13
【问题描述】:

我有这个代码,我的问题是图像和文本出现在一个 div 中。当图像也出现在另一个 div 上时,如何分离文本并将其显示到另一个 div。但是当我重新加载页面时,图像 1 将对应于文本 1。与图像 2 相同,它也应该与文本 2 一起出现。

<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:  "image1.jpg"
        },
        {
          text: "text2",
          img:  "image2.jpg",
        }
      ];
      var quote = quotes[Math.floor(Math.random() * quotes.length)];
      document.getElementById("quote").innerHTML =
        '<p>' + quote.text + '</p>' +
        '<img src="' + quote.img + '">';
    })();
  </script>
</body>
</html>

以及来自 cmets 的更新代码:

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset=utf-8 /> 
        <title>Random Text Plus Image</title> 
    </head>
    <body>
        <div id="img"></div>
        <div id="text"></div>
        <script> 
            (function() { 
                var img = ["image1.jpg", "image2.jpg"]; 
                var text= ['text1','text2']; 
                var img = img[Math.floor(Math.random() * img.length)]; 
                var text = text[Math.floor(Math.random() * text.length)];                 
                document.getElementById("img").innerHTML = '<div>'+ text + '</div>'+ '<img src="' + img + '">'; })(); 
       </script>
    </body>
</html>

【问题讨论】:

  • 所以将一行放在一个 div 中,并将图像设置在另一个中。看看代码在做什么,对另一个 div 做同样的事情。
  • 我已经尝试过了,但似乎我做错了。这是我的问题。我是 javascript 的新手。 @epascarello
  • @epascarello 随机文字加图片
    '+ ''; })();
  • 当我操作代码时,image1 不与文本 1 配对....有时它与显示的文本 2 配对
  • 因为你使用的是两个随机数!
  • 标签: javascript html variables random


    【解决方案1】:
    document.getElementById("quote").innerHTML = 
    '<div><p>' + quote.text + '</p></div>' +
    '<dic><img src="' + quote.img + '"></div>';
    

    【讨论】:

      【解决方案2】:

      不知道为什么要从更有意义的第一个数据结构中更改它,但您遇到的问题是您生成了两个不同的数字!

      var img = ["image1.jpg", "image2.jpg"]; 
      var text= ['text1','text2']; 
      var img = img[Math.floor(Math.random() * img.length)]; //random number 1
      var text = text[Math.floor(Math.random() * text.length)];   //random number 2               
      document.getElementById("img").innerHTML = '<div>'+ text + '</div>'+ '<img src="' + img + '">';
      

      应该是这样的

      var img = ["image1.jpg", "image2.jpg"]; 
      var text= ['text1','text2']; 
      var ranNum = Math.floor(Math.random() * img.length);
      var img = img[ranNum]; 
      var text = text[ranNum];   
      document.getElementById("text").innerHTML = '<div>'+ text + '</div>';
      document.getElementById("img").innerHTML = '<img src="' + img + '">';
      

      【讨论】:

        猜你喜欢
        • 2018-08-11
        • 2018-07-24
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2021-10-16
        • 1970-01-01
        • 2023-01-25
        相关资源
        最近更新 更多