クリックするたびに配列が空であるのはなぜですか？

Question

これは基本的に私がアイコンをクリックするたびに.favorite私はそれを私の配列にオブジェクトを追加する必要があります。最初にクリックすると、親divが配列に追加されますが、2回目に最初のものを削除し、最後の親divを取得します。

「月曜日」、「火曜日」、「お気に入り」という3つのタブがあります。私は開始時に空いているトグルアイコンを持っています。「お気に入り」です。私が月曜日にアイコンをクリックすると、空の心臓が塗りつぶされ、その親がクローン化され、 '#fav'タブに追加されます。これが起こると、クローンはローカルストレージに保存されます。だから、人々がページをリフレッシュする場合、彼らはまだ彼らの好みを見ることができます。

特定のdivが '#fav'から削除されたクローンされたdivのいずれかで心臓がクリックされ、配列とローカルストレージからも削除する必要があります。

結論としては、クローン化された各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にtempArrayを（varを使用して）宣言します。
これは、以前のclickの情報（それが保持すると思われる情報）を保持しない理由です。

私はあなたにこの答えを "満足"していません...あなたの問題が完全に解決しない場合は、詳細を編集してください。 CodePenをフォークしてプロジェクトのように見せてください。

---

EDIT

私はあなたのスクリプトを得るものから、あなたはのlocalStorageする「お気に入りに登録しました」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

Answer 2

のlocalStorageでdiv要素を保存しないでください。以下のようなオブジェクトコンストラクタ関数を使用して、これらを配列にプッシュし、次に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); 
     } 
    } 
}