演示

Question

我对编码非常陌生，对按钮一无所知，如果我错过了很多内容，请抱歉。我不知道如何完成此循环，所以当我单击按钮时，它会循环遍历我制作的数组。

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>

Answer 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>

Answer 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>

Answer 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])
    }
});

Answer 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>

我如何完成此按钮阵列以使其工作？

4 个答案:

演示