如何將多個克隆的div添加到本地存儲中的數組，然後通過單擊切換圖標刪除其中的每一個？

每次我點擊'a'標籤=>（'.favorite'）..我想要定位父級並將此整個div添加到數組中。這個'a'標籤包含一個可以在兩個類之間切換的圖標，就像我在代碼中看到的一樣。當心髒充滿時，父母將被克隆並添加到一個新的標籤=>'#fav。'但是，正如我之前所說，我還想將此對象添加到數組，然後當心髒變空時，我想僅從現有數組中刪除此對象並保留所有其他對象。如何將多個克隆的div添加到本地存儲中的數組，然後通過單擊切換圖標刪除其中的每一個？

所以基本上，問題是我不知道該怎麼做。將每個對象存儲到本地存儲中的數組中，然後在需要時從數組中移除每個對象，如上所述。

如果有人能指出我正確的方向，我將不勝感激。

HTML：

<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 not-selected" id="box2"> 
    <a href="#" class="favorite"><i class="fa fa-heart-o" aria-hidden="true"></i></a> 
    </div> 
    <div class="box not-selected" id="box2"> 
    <a href="#" class="favorite"><i class="fa fa-heart-o" aria-hidden="true"></i></a> 
    </div> 
    <div class="box" id="fav"></div>

JS：

$('.favorite').on('click', function(){ 

    var par = $(this).parents('.box'); 

    //TOGGLE FONT AWESOME ON CLICK 
    if ($(par).hasClass('selected')) { 
    par.find('.favorite i').toggleClass('fa-heart fa-heart-o'); 
    } else { 
    par.find('.favorite i').toggleClass('fa-heart-o fa-heart'); 
    }; 

    // Clone div 
    var add = $(this).parent().parent(); 
    add.each(function(){ 
    if (par.find('.favorite i').hasClass('fa-heart')) { 

     var boxContent = ($(add).clone(true)); 
     var showHide = $(boxContent).find(".session").addClass('selected').removeClass('hidden-m'); 
     var get = $(boxContent).html(); 

     // Localstorage 
     var temp = localStorage.getItem('sessions'); 

     // Array with cloned divs 
     var tempArray = []; 

     tempArray.push(get); 

     var myJSONString = JSON.stringify(tempArray); 

     var parseString = $.parseJSON(myJSONString); 

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

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

    } else if (par.hasClass('selected').find('favorite').hasClass('fa-heart-o')) { 
     // remove div from array 
    }; 

    }); 
}); 

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

來源

2017-09-09 Francisco Figueira

出了什麼問題，您的工作流程，你正面臨着。你還沒有問過問題。 –

對不起，如果我沒有好好解釋自己。我不知道我是否將對象推向陣列，以便可以隨後刪除某個對象。所以，如上所述，當點擊'a'標籤時，它會根據切換類來添加或刪除數組中的父div。我希望這是有道理的@DanPhilip –

您是否已經制定了推送部分，div是否被正確推送到陣列？ –

從數組中刪除DIV，下面提供的推精品工程

if (par.hasClass('selected').find('favorite').hasClass('fa-heart-o')) { 
    var target = $(boxContent).html().replace(/\r?\\n/g, '').replace(/\\/g, '').replace(/^\[(.+)\]$/,'$1').replace (/(^")|("$)/g, '');; 
    var targetArr = $.parseJSON(localStorage.getItem('sessions')); 
    var index = targetArr.indexOf(target); 
    targetArr.splice(index,1); 
    var targetString = JSON.stringify(targetArr); 
    localStorage.setItem('sessions',targetString);   
};

來源

2017-09-09 02:52:00

非常感謝，正是我需要的！ @DanPhilip –

@FranciscoFigueira樂意幫忙！ –

如何將多個克隆的div添加到本地存儲中的數組，然後通過單擊切換圖標刪除其中的每一個？

回答

相關問題