if (localStorageKey !== null ) {
lsContent.push({
id: id,
p: paragraf
});
}
<div>
<p><input class="check" id="check-option-1" name="name" type="checkbox">
<label for="check-option-1"></label>
</p>
<p class="copy">1</p>
<p class="copy-2">1.1</p>
</div>
<div>
<p><input class="check" id="check-option-2" name="name" type="checkbox">
<label for="check-option-2"></label>
</p>
<p class="copy">2</p>
<p class="copy-2">2.1</p>
</div>
</div>
<div class="modal">Здесь ничего нет</div>
<div class="modal">Здесь ничего нет</div>
<div>
<p><input class="check" id="check-option-1" name="name" type="checkbox">
<label for="check-option-1"></label>
</p>
<p class="copy">1</p>
<p class="copy-2">1.1</p>
</div>
<div>
<p><input class="check" id="check-option-2" name="name" type="checkbox">
<label for="check-option-2"></label>
</p>
<p class="copy">2</p>
<p class="copy-2">2.1</p>
</div>
</div>
<div class="modal">Здесь ничего нет</div>
Тут нужно почти полностью переписывать код, по-этому к сожалению пока у меня нет времени вам его написать.
Почему вас не устраивать просто сохранение HTML-кода в localStorage? В целом это ведь рабочая версия, просто не совсем верная с точки зрения правильности исполнения кода.
const checkedName = 'local';
const current = localStorage.getItem(checkedName);
if (current !== null) {
let p = $('.copy');
let p2 = $('.copy-2');
current.push = ({
p: p,
p2: p2
});
localStorage.setItem(checkedName, JSON.stringify(current));
}
function actChecked(id) {
const checkedName = 'checked';
let current = localStorage.getItem(checkedName);
if (id === 'ready') {
if (current !== null) {
JSON.parse(current).forEach(v => {
$('#' + v).prop('checked', true);
});
}
return;
}
if (current === null) {
return localStorage.setItem(checkedName, JSON.stringify([id]));
}
let arrCurrent = JSON.parse(current);
const iof = arrCurrent.indexOf(id);
if (iof !== -1) {
arrCurrent.splice(iof, 1);
return (arrCurrent.length === 0) ? localStorage.removeItem(checkedName) : localStorage.setItem(checkedName, JSON.stringify(arrCurrent));
} else {
arrCurrent.push(id);
return localStorage.setItem(checkedName, JSON.stringify(arrCurrent));
}
}
function getHTML() {
const checkedName = 'checked';
const current = localStorage.getItem(checkedName);
if (current !== null) {
const arrCurrent = JSON.parse(current);
let mHTML = '';
arrCurrent.forEach(id => {
let replace = '';
$('#' + id).parent().nextAll('p').each(function() {
replace += this.outerHTML.replace(/(<|<\/)p/g, '$1span');
});
mHTML += '<div class="item">' + replace + '</div>';
})
return mHTML;
} else return;
}
$('body').on('change', '.check', function(){
var modal = $('.modal');
if ($('input').is(':checked')) {
if (!modal.children().is('.item')) modal.html('');
} else {
modal.removeClass('modal-show').text('Здесь ничего нет');
}
if ($(this).prop('checked')) {
modal.addClass('modal-show');
}
actChecked($(this).attr('id'));
modal.html(getHTML());
});
$(function() {
$('.modal').html(getHTML());
actChecked('ready');
});
$('.preview').click(function(){
$(".modal").toggleClass("modal-show");
});
arrCurrent.forEach(id => {
let replace = '';
$('#' + id).parent().siblings('.copy, .copy-2, .pic-art').each(function() {
replace += this.outerHTML.replace(/(<|<\/)p/g, '$1span');
});
mHTML += '<div class="item">' + replace + '</div>';
})
var obj {
id: id,
name: name
image: img - у меня еще есть мини картинка
}