javascript - 显示对象的随机内容

标签 javascript arrays object random dom-events

我在一个项目中看到一个函数，该函数可以提升 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>

最佳答案

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

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

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

  3. 创建了一个函数，用于设置从 0 到(项目)数组长度的随机数，并将 HTML 附加到 DOM 容器

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

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

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 是一个 block 作用域变量，var 不是。

我的代码片段中的

data 不是一个特殊的对象。我可以将其命名为 doggieDoo 或任何其他名称(当然不是保留术语)。 this是JS中的保留关键字。

所以，基本上它们的意思是相同的:

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

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

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

箭头函数与传统函数

变量声明:

此关键字:

我认为通过查看链接内容，您会获得比我开始解释更多的信​​息:)

关于javascript - 显示对象的随机内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58501705/

上一篇：javascript - 如何在React Native中从动态UI将数据上传到服务器

下一篇：javascript - Sharepoint 编辑按钮，允许用户编辑 Web 部件列表中的数据

相关文章：

javascript - jQuery javascript : Array.prototype.slice.call的含义

javascript - 收藏类型

java - 如何创建一个对象，将其设置为与另一个对象完全相同，并修改它而不影响循环内的旧对象？

javascript - 使用 Service Worker 阻止不安全的 http 请求

javascript -\u 在 JavaScript String.raw`template literal`

javascript - 解析 json 对象时出现问题

javascript - 实例化 JS 对象，该对象从字符串名称中获取参数数组

javascript - 惯用地查找给定值在数组中出现的次数

javascript - 为什么 "this"不等于调用该函数的对象？

javascript - 为什么 toString() 是一个不需要对象的方法？

©2024 IT工具网  联系我们