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

Question

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

我正在使用三个标签，分别称为“星期一”、“星期二”和“收藏夹”。我有一个切换图标，在“最喜欢的 i”开始时是一颗空心。如果我在星期一并单击该图标，则会填充空心，并将其父级克隆并添加到“#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);

    };

  });
});

小提琴：https://jsfiddle.net/itsfranhere/nbLLc3L0/44/

Answer 1

您的问题标题很清楚...
但是您的问题本身和您提供的代码使任何人无法完全确定地回答。

Here is what the provided code produces，作为复制的尝试。

现在，如果我不打扰那个代码，我认为没有人可以推断出它应该做什么......
您在标题中的问题可以通过以下方式回答：

简单！您在每个click 处声明（使用var）tempArray。
这就是为什么它不保留之前click 的信息（无论它应该保留什么）。

我对您的这个回答并不“满意”...因此，如果这不能完全回答您的问题，请编辑您的问题并提供更多详细信息。随意分叉 CodePen，让它看起来更像你的项目。

---

编辑

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

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

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

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

这是您的代码，已更新为执行上述操作。仔细看看代码中的 cmets。

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

Answer 2

不要在 localStorage 中保存 div 元素。我建议您使用像下面这样的对象构造函数为每个 [whatever] 创建一个唯一的对象，然后将它们推送到数组中，然后在 try 块中推送到 localStorage。

localStorage.setItem('myobjects', JSON.stringify(myobjects));

// Object Constructor Functions
function Myobject(id, username, password) {
    this.id = id;
    this.username = username;
    this.password = password;
    this.type = 'credential';
}

function duplicate(id,obj){
    var result = false;
    obj.forEach( function (arrayItem){
        if (arrayItem.id == id){
          result = true;
        }
    }); 
    return result;
}


function deleteObject(type, id){ 
    var obj = {};
    if (type === 'foo') {
        obj = myobjectwhatever;
        deleteThis(obj);
        //save  to local storage
        try {
            localStorage.setItem('myobject', JSON.stringify(myobjects));
        }
        catch (e) {
            console.log(e);
        }
    }
    else if (type === 'bar') {
       //...
    }

    function deleteThis(o){
        try {
            for (var i = 0, iLen = o.length; i < iLen; i++) {
                if (o[i].id === id) {
                    o.splice(i, 1);
                }
            }
        }
        catch (e) {
            console.log(e);
        }
    }
}