时间戳

首页 > 解决方案 > 显示来自对象的随机内容

javascript - 显示来自对象的随机内容

问题描述

我在一个项目中看到了一个函数，它可以提升 JavaScript 中不同对象的随机值并在 HTML 标记中显示内容，我想做类似但不同的东西。当我使用一个按钮将随机值传递给单个对象并将其显示在 div 中时。

我在 JS 中创建了一些对象，并在单击按钮显示对象时创建了一个动作，但我不知道如何将所有内容放入 div 并获取随机信息。

function deosebitProject() {
  var site_1 = {
    name: "Site 1",
    url: "https://www.google.ro/",
    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
    site_image: ["https://adpconstruct.ro/wp-content/uploads/2019/07/poza52.jpg", "https://adpconstruct.ro/wp-content/uploads/2019/07/poza52.jpg", "https://adpconstruct.ro/wp-content/uploads/2019/07/poza52.jpg"]
  }

  var site_2 = {
    name: "Site 2",
    url: "https://www.google.ro/",
    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
    site_image: ["https://adpconstruct.ro/wp-content/uploads/2019/07/poza52.jpg", "https://adpconstruct.ro/wp-content/uploads/2019/07/poza52.jpg", "https://adpconstruct.ro/wp-content/uploads/2019/07/poza52.jpg"]
  }

  document.write(
    '<div class="container">',
    '<div class="row">',
    '<div class="col-md-6">',
    '<h2>' + site_1.name + '</h2>',
    '<a href="' + site_1.url + '">' + site_1.url + '</a>',
    '<p>' + site_1.description + '</p>',
    '</div>',
    '<div class="col-md-6">',
    '<img src="' + site_1.site_image[0] + '"><br /> <img src =' + site_1.site_image[1] + '"><br /> <img src = "' + site_1.site_image[2] + '">',
    '</div>',
    '</div>',
    '</div>'
  );

  document.write(
    '<div class="container">',
    '<div class="row">',
    '<div class="col-md-6">',
    '<h2>' + site_2.name + '</h2>',
    '<a href="' + site_2.url + '">' + site_2.url + '</a>',
    '<p>' + site_2.description + '</p>',
    '</div>',
    '<div class="col-md-6">',
    '<img src="' + site_2.site_image[0] + '"><br /> <img src =' + site_2.site_image[1] + '"><br /> <img src = "' + site_2.site_image[2] + '">',
    '</div>',
    '</div>',
    '</div>'
  );
}
<!doctype html>
<html>

<head>
  <title>Javascript Challange 1</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="random.js"></script>
</head>

<body>
  <div>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce blandit, erat ac lobortis tristique, eros eros tristique enim, at imperdiet lectus orci fermentum ex. Suspendisse at nisl pretium, congue nunc sit amet, rutrum lectus. Integer eu luctus
      metus. Duis placerat finibus urna eu euismod. Vestibulum mollis viverra lacinia. Curabitur odio elit, venenatis eget congue sit amet, sagittis bibendum risus. Donec pretium id justo nec elementum. Duis interdum non ligula at imperdiet. Nunc ultricies
      ac arcu id aliquet. Ut vitae risus magna. Curabitur mollis placerat tortor, nec finibus mi elementum nec. Pellentesque vitae tortor elementum, porttitor magna sit amet, dapibus nisl. Nullam sed dolor id enim tempus porttitor. Curabitur eleifend
      condimentum nisl, id placerat purus semper sed. Nulla facilisi. Donec vehicula tempor nulla a tempor. Nulla quis rhoncus elit. Aenean sagittis auctor turpis vel pharetra. Donec est nunc, molestie sit amet ullamcorper sed, facilisis nec sapien. Mauris
      mauris quam, porta sed ante ut, egestas ultricies augue. Pellentesque ornare arcu ac vestibulum mattis. Sed nec malesuada turpis. Cras aliquam turpis nec justo tempus finibus. Morbi et luctus est.Curabitur eget malesuada neque. Lorem ipsum dolor
      sit amet, consectetur adipiscing elit. Maecenas sed sagittis arcu. Maecenas quis orci quis lorem luctus feugiat placerat in tellus.
    </p>
  </div>
  <div id="our-project">
    <button onclick="deosebitProject()">View Project</button>
  </div>
</body>

</html>

标签： javascriptarraysobjectrandomdom-events

解决方案

我不太明白 whoout 应该是随机的，所以我从容器中的随机项目显示开始。

  1. 创建了项目对象的数组

  2. 创建了一个函数，该函数创建要附加到 DOM 容器的 HTML

  3. 创建了一个将随机数设置为 0 到（项目）数组长度的函数，并将 HTML 附加到 DOM 容器

  4. 使用 将事件与 DOM 解耦HTML.addEventListener()，并将随机函数放在那里（在点击事件上）

现在，如果您按下按钮，则会从数组中随机选择一个项目，并将其显示在容器中

const arr = [{
    name: "Site 1",
    url: "https://www.google.ro/",
    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
    site_image: ["https://adpconstruct.ro/wp-content/uploads/2019/07/poza52.jpg", "https://adpconstruct.ro/wp-content/uploads/2019/07/poza52.jpg", "https://adpconstruct.ro/wp-content/uploads/2019/07/poza52.jpg"]
  },
  {
    name: "Site 2",
    url: "https://www.google.ro/",
    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
    site_image: ["https://adpconstruct.ro/wp-content/uploads/2019/07/poza52.jpg", "https://adpconstruct.ro/wp-content/uploads/2019/07/poza52.jpg", "https://adpconstruct.ro/wp-content/uploads/2019/07/poza52.jpg"]
  }
]

const projectHTML = (data) => {
  let html = ''
  html += '<div class="container">'
  html += '<div class="row">'
  html += '<div class="col-md-6">'
  html += `<h2>${data.name}</h2>`
  html += `<a href="${data.url}">${data.url}</a>`
  html += `<p>${data.description}'</p>`
  html += '</div>'
  html += '<div class="col-md-6">'
  data.site_image.forEach((e, i, a) => {
    html += `<img src="${data.site_image[i]}"`
    i === a.length - 1 ? html += '' : html += '<br />'
  })
  html += '</div>'
  html += '</div>'
  html += '</div>'

  return html
}

function deosebitProject(arr) {
  const r = Math.floor(Math.random() * arr.length);
  document.getElementById('content').innerHTML = projectHTML(arr[r])
}

const btn = document.getElementById('btn')
btn.addEventListener('click', function(e) {
  deosebitProject(arr)
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div>
  <p id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce blandit, erat ac lobortis tristique, eros eros tristique enim, at imperdiet lectus orci fermentum ex. Suspendisse at nisl pretium, congue nunc sit amet, rutrum lectus. Integer eu luctus
    metus. Duis placerat finibus urna eu euismod. Vestibulum mollis viverra lacinia. Curabitur odio elit, venenatis eget congue sit amet, sagittis bibendum risus. Donec pretium id justo nec elementum. Duis interdum non ligula at imperdiet. Nunc ultricies
    ac arcu id aliquet. Ut vitae risus magna. Curabitur mollis placerat tortor, nec finibus mi elementum nec. Pellentesque vitae tortor elementum, porttitor magna sit amet, dapibus nisl. Nullam sed dolor id enim tempus porttitor. Curabitur eleifend condimentum
    nisl, id placerat purus semper sed. Nulla facilisi. Donec vehicula tempor nulla a tempor. Nulla quis rhoncus elit. Aenean sagittis auctor turpis vel pharetra. Donec est nunc, molestie sit amet ullamcorper sed, facilisis nec sapien. Mauris mauris quam,
    porta sed ante ut, egestas ultricies augue. Pellentesque ornare arcu ac vestibulum mattis. Sed nec malesuada turpis. Cras aliquam turpis nec justo tempus finibus. Morbi et luctus est.Curabitur eget malesuada neque. Lorem ipsum dolor sit amet, consectetur
    adipiscing elit. Maecenas sed sagittis arcu. Maecenas quis orci quis lorem luctus feugiat placerat in tellus.</p>
</div>
<div id="our-project">
  <button id="btn">View Project</button>
</div>

编辑

const projectHTML = (data) => {}是一个箭头函数（这是一个箭头：=>）。大多数时候箭头函数和传统函数是可以互换的——大多数时候！

另一个区别是我使用const而不是var。在这个简单的情况下，这也没有什么区别 - const是块范围的变量，var不是。

我的代码片段中的数据不是特殊对象。我可以将它命名为doggieDoo或其他任何东西（当然不是保留词）。this是 JS 中的保留关键字。

所以，基本上它们的意思是一样的：

const projectHTML = (data) => {}
/*is the same as*/
var projectHTML = function(data) {}

但我必须强调，在这种情况下他们做同样的事情！

您可以在这里阅读更多内容：

箭头函数与传统函数

变量声明：

这个关键字：

我认为您将通过查看链接内容获得更多信息，而不是我开始解释:)

推荐阅读