Question

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

我正在使用三个标签，分别称为＆＃39;星期一＆＃39;星期二＆＃39;星期二＆＃39;和＆＃39;收藏夹＆＃39;。我有一个切换图标，一开始是空心的，最喜欢我的。如果我在星期一点击图标，那么空心就会被填满，其父母将被克隆并添加到＆＃39; #ef＆＃39;标签。发生这种情况时，克隆将保存到本地存储。因此，如果人们刷新页面，他们仍然可以看到他们的偏好。

当在其中一个克隆的div中点击心脏时，特定的div将从＆＃39;＃fav＆＃39;并且还必须从阵列和本地存储中删除。

总而言之，我需要将每个克隆的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，试图重现。

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

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

我对你的答案并不“满意”......如果这不完全回答你的问题，请编辑你的问题并提供更多细节。随意分叉CodePen使其看起来更像您的项目。

<小时/> 的修改

根据我的脚本，您希望将“favited”div保存到localstorage。这意味着如果“不受欢迎”，您还必须从localstorage和favorites选项卡中删除它们。

此外，您在“待克隆”元素上使用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

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

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

2 个答案: