【问题标题】：How do i finish this button array to make it work?我如何完成这个按钮阵列以使其工作？
【发布时间】：2019-06-13 11:06:48
【问题描述】：

我对编码很陌生，还没有学到任何关于按钮的知识，如果我遗漏了很多东西，很抱歉。我不知道如何完成这个循环，这样当我单击按钮时，它会循环遍历我制作的数组。

var love = ["0", "1", "2", "3", "4", "5"];

for (let i = 0; i < love.length; i++) {
  console.log(love[i])
}


$(".button").on("click", function() {});

* {
  font-family: Courier, monospace;
}

body {
  text-align: center;
  width: 600px;
  margin: 0px auto;
  background-color: #cdcdcd;
  background: url(http://1.bp.blogspot.com/-3znkSMOAGlw/Tx4Hg9GlDoI/AAAAAAAACgM/X4p_G-yHAiY/s1600/heart_background.jpg);
}

.love {
  font-size: 1.5em;
  width: 600px;
  height: auto;
  margin: 0 auto;
  background-color: #efefef;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.9);
  ;
  border-radius: 20px;
  color: #000;
  box-shadow: -10px 10px 20px rgba(100, 100, 100, .8);
  ;
}

.button {
  height: 70px;
  width: 150px;
  margin: 20px auto;
  color: #ffffff;
  background-color: #380002;
  text-align: center;
  font-size: 20px;
  border-radius: 15px;
  box-shadow: -5px 5px 10px rgba(100, 100, 100, .8);
  ;
}

<button class=button>New </button>
<div class="love"></div>

【问题讨论】：

请清楚你的问题。

标签： javascript jquery html css arrays

【解决方案1】：

首先，这不仅仅是 javaScript，它是 jQuery。其次，你的问题有点不清楚。您想在单击按钮时启动 for 循环和控制台日志吗？像这样的东西？：

var love = ["0", "1", "2", "3", "4", "5"];

$(".button").on("click", function() {
  for (let i = 0; i < love.length; i++) {
    console.log(love[i])
  }
});

* {
  font-family: Courier, monospace;
}

body {
  text-align: center;
  width: 600px;
  margin: 0px auto;
  background-color: #cdcdcd;
  background: url(http://1.bp.blogspot.com/-3znkSMOAGlw/Tx4Hg9GlDoI/AAAAAAAACgM/X4p_G-yHAiY/s1600/heart_background.jpg);
}

.love {
  font-size: 1.5em;
  width: 600px;
  height: auto;
  margin: 0 auto;
  background-color: #efefef;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.9);
  ;
  border-radius: 20px;
  color: #000;
  box-shadow: -10px 10px 20px rgba(100, 100, 100, .8);
  ;
}

.button {
  height: 70px;
  width: 150px;
  margin: 20px auto;
  color: #ffffff;
  background-color: #380002;
  text-align: center;
  font-size: 20px;
  border-radius: 15px;
  box-shadow: -5px 5px 10px rgba(100, 100, 100, .8);
  ;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="button">New </button>
<div class="love"></div>

【讨论】：

如果您希望通过一键循环遍历数组，这是完美的选择。

【解决方案2】：

这如你所愿（我想！我不是 100% 你在寻找的东西）。我创建了一个变量love_ind，它跟踪您在数组中的位置，并且随着每次按下按钮而增加。它还会检查您是否到达数组的末尾并重新开始循环。

如果这不是您所希望的，请告诉我。

演示

// Create array
var love = ["0", "1", "2", "3", "4", "5"];

// Create an index that we can increase later
var love_ind = 0

// Add click event to button
$(".button").on("click", function() {

  // Change text of the div
  $(".love").text(love[love_ind]);
  
  // Increase index for next button press
  love_ind = love_ind + 1;
  
  // Check if index is greater than the length of the array
  if (love_ind == love.length) {
    
    // Reset index to 0 if it is
    love_ind = 0;
    
  }
  
});

* {
  font-family: Courier, monospace;
}

body {
  text-align: center;
  width: 600px;
  margin: 0px auto;
  background-color: #cdcdcd;
  background: url(http://1.bp.blogspot.com/-3znkSMOAGlw/Tx4Hg9GlDoI/AAAAAAAACgM/X4p_G-yHAiY/s1600/heart_background.jpg);
}

.love {
  font-size: 1.5em;
  width: 600px;
  height: auto;
  margin: 0 auto;
  background-color: #efefef;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.9);
  ;
  border-radius: 20px;
  color: #000;
  box-shadow: -10px 10px 20px rgba(100, 100, 100, .8);
  ;
}

.button {
  height: 70px;
  width: 150px;
  margin: 20px auto;
  color: #ffffff;
  background-color: #380002;
  text-align: center;
  font-size: 20px;
  border-radius: 15px;
  box-shadow: -5px 5px 10px rgba(100, 100, 100, .8);
  ;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class=button>New</button>
<div class="love"></div>

【讨论】：

所以我让你的代码在 codepen 中工作，但是当我将它转移到我正在处理的我的 html 记事本时它不会工作。就像弹出数组项应该弹出的白框一样，但它只是保持空白。 var love = ["0", "1", "2", "3"]; var love_ind = 0 $(".button").on("click", function() { $(".love").text(love[love_ind]); love_ind = love_ind + 1; if (love_ind == love.length) { love_ind = 0; } });我输入正确吗？

【解决方案3】：

在函数体中移动要执行的操作的代码。

$(".button").on( "click", function() {
    var love = ["0", "1", "2", "3", "4", "5"];
    for (let i = 0; i < love.length; i++) {
        console.log (love[i])
    }
});

【讨论】：

【解决方案4】：

//Declare
const button = document.querySelectorAll(".button");
let love = ["0", "1", "2", "3", "4", "5"];

//Global Listener
document.addEventListener("click", (e) => {
	const target = e.target;
  
  //Check if button
  if(target.classList.contains("button"))
    //Loop
		love.forEach((item, i, array) => console.log(item));
    
});

* {
  font-family: Courier, monospace;
}

body {
  text-align: center;
  width: 600px;
  margin: 0px auto;
  background-color: #cdcdcd;
  background: url(http://1.bp.blogspot.com/-3znkSMOAGlw/Tx4Hg9GlDoI/AAAAAAAACgM/X4p_G-yHAiY/s1600/heart_background.jpg);
}

.love {
  font-size: 1.5em;
  width: 600px;
  height: auto;
  margin: 0 auto;
  background-color: #efefef;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.9);
  ;
  border-radius: 20px;
  color: #000;
  box-shadow: -10px 10px 20px rgba(100, 100, 100, .8);
  ;
}

.button {
  height: 70px;
  width: 150px;
  margin: 20px auto;
  color: #ffffff;
  background-color: #380002;
  text-align: center;
  font-size: 20px;
  border-radius: 15px;
  box-shadow: -5px 5px 10px rgba(100, 100, 100, .8);
  ;
}

<button class=button>New </button>
<div class="love"></div>

【讨论】：