为单击按钮时出现的数组中的每个项目创建一个 div答案

【问题标题】：Creating a div for each item in an array that appears when a button is clicked为单击按钮时出现的数组中的每个项目创建一个 div
【发布时间】：2019-12-05 02:54:08
【问题描述】：

我有一组项目，我想在按下链接时单独显示为 div，每个项目都出现在最后一个出现的右侧。我目前已经能够在单击链接时显示数组中的整个项目列表，但是它们彼此下方，我希望它一次只有一个项目。我对 HTML 和 javascript 非常陌生，所以提前感谢任何可以帮助我弄清楚如何做到这一点的人

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>tangential headache</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<a href="#" class="info" data-info="info1" allign= "right">+</a>
<script src="script.js"></script>
</body>
</html>

var tabs = [
  "natal chart - Anthony Weiner",
  "Das Kapital pdf",
  "Applying ancient divination to modern intuition",
  "QAnon - Wikipedia",
  "ADD and ADHD - webMD",
  "apply for a ted talk - google search"
],
arrayLength = tabs.length;

for (i = 0; i < tabs.length; i++){
  $(".info").click(function() {
    var newElement = document.createElement('div');
    newElement.id = tabs[i]; newElement.className = "tabs";
    newElement.innerHTML = tabs[i];
    document.body.appendChild(newElement);





});
}

【问题讨论】：

是 entire list of items 带有 UL / LI html 标签吗？请为此显示 HTML 代码部分？有父 div 吗？
你好抱歉，这是我第一次在这个论坛上用我的 html 和 javascript 代码更新帖子。但是，它现在不是很实用

标签： javascript jquery html arrays

【解决方案1】：

var tabs = [
  "natal chart - Anthony Weiner",
  "Das Kapital pdf",
  "Applying ancient divination to modern intuition",
  "QAnon - Wikipedia",
  "ADD and ADHD - webMD",
  "apply for a ted talk - google search"
],
arrayLength = tabs.length;

  $(".info").click(function() {
    
    var index = $('.tabs').length;
    if (index >= tabs.length) return
    var newElement = document.createElement('div');
    newElement.id = tabs[index]; newElement.className = "tabs";
    newElement.innerHTML = tabs[index];
    document.body.appendChild(newElement);


});

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>tangential headache</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body>
<a href="#" class="info" data-info="info1" allign= "right">+</a>
<script src="script.js"></script>
</body>
</html>

您应该将 for 循环包裹在 click 事件中。

【讨论】：

哇，非常感谢。您是否有机会知道如何在单击按钮时只显示一个字符串？
单字符串是什么意思？哪个？
它解决了一个我没有问过的问题，但还是谢谢你。我的意思是我希望数组中的每个字符串在按下链接时单独出现，并且每次按下它时，数组中的下一个字符串出现在最后一个字符串旁边。再次感谢。

【解决方案2】：

var tabs = [
  "natal chart - Anthony Weiner",
  "Das Kapital pdf",
  "Applying ancient divination to modern intuition",
  "QAnon - Wikipedia",
  "ADD and ADHD - webMD",
  "apply for a ted talk - google search"
],
arrayLength = tabs.length;

  $(".info").click(function() {
    
    var index = $('.tabs').length;
    if (index >= tabs.length) return
    var newElement = document.createElement('div');
    newElement.id = tabs[index]; newElement.className = "tabs";
    newElement.innerHTML = tabs[index];
    document.body.appendChild(newElement);


});

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>tangential headache</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body>
<a href="#" class="info" data-info="info1" allign= "right">+</a>
<script src="script.js"></script>
</body>
</html>

【讨论】：