javascript - 为什么每次点击时数组都是空的？

Question

所以基本上每次我单击“.favorite i”图标时，它都应该将一个对象添加到我的数组中。如果我第一次单击它会将父 div 添加到数组中，但第二次它会删除第一个并获取最后一个父 div。

我正在使用名为“星期一”、“星期二”和“收藏夹”的三个选项卡。我有一个切换图标，它在开始“最喜欢的我”时是一颗空心。如果我在星期一点击图标，空心就会被填满，它的父级被克隆并添加到“#fav”选项卡。发生这种情况时，克隆将保存到本地存储。因此，如果人们刷新页面，他们仍然可以看到他们的偏好。

当在其中一个克隆的 div 中单击心脏时，特定的 div 将从“#fav”中删除，并且还必须从数组和本地存储中删除。

总而言之，我需要将每个克隆的 div 保存到一个数组/本地存储中，然后当它们从 #fav 选项卡中删除时能够从数组中删除每个。

如何克服这个问题？非常感谢。

HTML

<div class="container">
   <div class="tabs_main">

      <div class="col-md-5"><a data-target="#mon" class="btn active" data-toggle="tab">Monday</a></div>
      <div class="col-md-5"><a data-target="#tue" class="btn active" data-toggle="tab">Tuesday</a></div>
      <div class="col-md-2"><a data-target="#fav" class="btn active" data-toggle="tab"><i class="fa fa-heart" aria-hidden="true"></i></a></div>

   </div>

   <div class="tab-content">

     <div class="tab-pane active" id="mon">
       <br>
       <div class="spaces">
         <div class="box-container">
           <div class="box not-selected" id="box1">
           <a href="#" class="favorite"><i class="fa fa-heart-o" aria-hidden="true"></i></a>
         </div>
         <div class="box-container">
           <div class="box not-selected" id="box2">
           <a href="#" class="favorite"><i class="fa fa-heart-o" aria-hidden="true"></i></a>
         </div>
       </div>
     </div>

     <div class="tab-pane" id="tue">
       <br>
       <div class="spaces">
       </div>
     </div>

     <div class="tab-pane" id="fav">
        <br>
     </div>

   </div>
</div>

JS

$('div.tab-pane').on('click', '.favorite', function(e) {
  var add = $(this).parent().parent();
  add.each(function(){

    if ($(add.find('.not-selected .favorite i').hasClass('fa-heart'))) {

      var boxContent = $(add).clone(true, true);
      var showHide = $(boxContent).find(".session").addClass('selected').removeClass('not-selected');
      var get = $(boxContent).wrap('<p/>').parent().html();
      $(boxContent).unwrap();

      var tempArray = [];

      tempArray.push(get);

      var myJSONString = JSON.stringify(get);

      var parseString = $.parseJSON(myJSONString);

      var finalString = myJSONString.replace(/\r?\\n/g, '').replace(/\\/g, '').replace(/^\[(.+)\]$/,'$1').replace (/(^")|("$)/g, '');

      var final = localStorage.setItem('sessions', finalString);

      $("#fav").append(tempArray);

    };

  });
});

fiddle :https://jsfiddle.net/itsfranhere/nbLLc3L0/44/

Answer 1

你的题目很清楚...
但是你的问题本身和你提供的代码阻止了任何人完全有把握地回答。

Here is what the provided code produces ，作为重现的尝试。

现在，如果我不去理会那段代码，我认为没有人可以推导出它应该做什么……
您在标题中的问题可以通过以下方式回答:

简单!您在每次点击时声明(使用var)tempArray。
这就是为什么它不保留前一个点击的信息(无论它应该保留什么)。

我对您的这个回答并不“满意”...因此，如果这不能完全回答您的问题，请使用更多详细信息编辑您的问题。随意 fork CodePen 以使其看起来更像您的项目。

---

编辑

根据我从您的脚本中得到的信息，您希望将“收藏的”div 保存到本地存储。这意味着如果其中一个“不受欢迎”，您还必须将它们从本地存储和收藏夹选项卡中删除。

此外，您在“待克隆”元素上使用 id。对此要格外小心。 id必须是唯一的。因此，如果 id 有用(这在提供的代码中并不明显)，请确保在克隆元素时使其唯一。

我改进了您尝试删除要保存的内容中的空格和换行符。

我必须给你的另一个好建议是在你的代码中使用有意义的变量名。让你的代码自己说话。可读性有帮助!

这是您的代码，已更新以执行上述操作。仔细查看代码中的注释。

var tempArray = [];

// Clones
$('div.tab-pane').on('click', '.favorite', function(e) {
  e.preventDefault();

  // Elements we play with... Having significative variable names.
  var heartLink = $(this);
  var box = heartLink.parent('.box');
  var container = box.parent('.box-container');
  var favoriteTab = $("#fav .spaces");

  // I don't know what is the use for those 3 lines below.
  var idFind = box.attr("id");
  var idComplete = ('#' + idFind);
  console.log(idComplete);

  //TOGGLE FONT AWESOME ON CLICK
  heartLink.find('i').toggleClass('fa-heart fa-heart-o'); // .selected or not, you need those 2 classes to toggle.
  box.toggleClass("selected not-selected"); // Toggle selected and not-selected classes

  // Clone div
  var boxContent = container.clone(true, true);

  // Change the id
  var thisID = boxContent.attr("id")+"_cloned";
  boxContent.attr("id", thisID);

  // Get the html to be saved in localstorage
  var get = boxContent.wrap('<p>').parent().html();
  get = get.replace(/\r?\n/g, "").replace(/>\s*</g, "><"); // remove line feeds and spaces
  console.log(get);
  boxContent.unwrap();

  // Decide to add or remove
  if(box.hasClass("selected")){
    console.log("Add to array")
    tempArray.push(get);

    // Add to favorites tab
    favoriteTab.append(boxContent);

  }else{
    console.log("Remove from array");
    var index = tempArray.indexOf(get);
    tempArray.splice(index);

    // Remove from favorite tab
    favoriteTab.find("#"+thisID).remove();
  }

  // Save
  localStorage.setItem('sessions', tempArray.join(""));

});

// Append item if localstorage is detected
if (localStorage["sessions"]) {
  $("#fav .spaces").append(localStorage["sessions"]);
  console.log( localStorage.getItem('sessions') );
}

Updated CodePen