js点击事件里面有个循环我可以点击一次执行一次循环吗

Question

let arr = [

                {id:1,text:"生活不只眼前的苟且"},
                {id:2,text:"还有诗"},
                {id:3,text:"和远方"}
                ];

let items = [];
$("#add").click(function(){
for(var i = 0;i<arr.length;i++){

    items.push(arr[i]); 
 }  

})
//这样写会直接把arr所有的数据全部加进去，希望是点击一次 添加arr中的一个id

Answer 1

  // 这里定义一个全局的index标识上次添加的id的位置
  let index = 0;
  let arr = [
    {id:1,text:"生活不只眼前的苟且"},
    {id:2,text:"还有诗"},
    {id:3,text:"和远方"}
  ];
  let arrLength = arr.length;
  let items = [];
  document.getElementById("add").onclick = function(){
    // 防止数组下标溢出
    if (index <= arrLength - 1) {
      items.push(arr[index]);
      // 添加完成之后下标后移
      index++;
    }
    console.log(items);
  }

Answer 2

可以先确定这个id,然后做一个比较
var id = ''

$("#add").click(function(){
    for(var i = 0;i<arr.length;i++){
        if (id === arr[i].id) {
            items.push(arr[i]); 
        }
    }  
})

Answer 3

闭包+立即执行函数实现：

$('#add').click(
    (function() {
        let count = 0;
        return function() {
            items.push(arr[count++]);
        };
    })()
);