localStorage и получается, что когда мы снимаем все чекбоксы localStorage у нас пустой и пустое значение добавляется в модальное окно. Нужно просто задать условие, чтобы при пустом localStorage результат функции не записывался в модальное окно.modal.html(actLocalStorage(wrapReplace));const localStr = actLocalStorage(wrapReplace);
if (localStr) modal.html(localStr);$arr["привет"] = "здарова " . $_POST[avtor] . "";
$arr["ты кто"] = "Я бармен :)";
$arr["наливай"] = "" . $_POST[avtor] . " Пивка ?";
$arr["бармен наливай"] = "Пивка ?";
$message = 'наливай';
if (isset($arr[$message])) {
// отправка
echo $arr[$message];
} else {
// если $message не найден в массиве
echo 'ничего не найдено';
}+. Их нужно экранировать. Стандартной функции экранирования в JS нет, но можно использовать свою функцию. Сделайте так:/* добавьте функцию экранирования */
function escapeRegExp(str){
return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}function actLocalStorage(data) следующее:.....
if (current.match(escapeRegExp(data))) {
.....foreach то это делается так:$arr["привет"] = "здарова " . $_POST[avtor] . "";
$arr["ты кто"] = "Я бармен :)";
$arr["наливай"] = "" . $_POST[avtor] . " Пивка ?";
$arr["бармен наливай"] = "Пивка ?";
$message = 'наливай';
if (array_search($message, array_keys($arr)) === false) {
// если $message не найден в массиве
echo 'ничего не найдено';
} else {
foreach ($arr as $key => $value) {
if ($key == $message) {
// отправка
echo $value;
}
}
}$result->mysqli_fetch_all(MYSQLI_ASSOC) но вряд ли это что-то изменит. У вас SQL-запрос возвращает false по-этому нужно искать причину почему запрос неправильный. foreach? Тут он вообще не нужен. id="check-option-1". Пример с data-id это был просто пример. Я просто привык отделять собственную идентификацию элементов от дефолтной HTML, по-этому и добавил дополнительный атрибут data-id.....
/* добавляем функцию для установки и записи чекбоксов в localStorage */
function actChecked(id) {
const checkedName = 'checked';
let current = localStorage.getItem(checkedName);
if (id === 'ready') { /* это условие опять же для того, чтобы проставить чекбоксы при загрузке страницы */
if (current !== null) {
/* перебираем каждый записанный в localStorage элемент и проставляем на нем чекбокс */
JSON.parse(current).forEach(v => {
$('#' + v).prop('checked', true);
});
}
return;
}
if (current === null) { /* если чекбоксов еще нет в localStorage то делаем новую запись */
return localStorage.setItem(checkedName, JSON.stringify([id]));
}
let arrCurrent = JSON.parse(current);
const iof = arrCurrent.indexOf(id);
if (iof !== -1) { /* если в localStorage уже есть записанные чекбоксы */
arrCurrent.splice(iof, 1); /* удаляем его */
return (arrCurrent.length === 0) ? localStorage.removeItem(checkedName) : localStorage.setItem(checkedName, JSON.stringify(arrCurrent));
} else { /* иначе добавляем новый чекбокс в localStorage */
arrCurrent.push(id);
return localStorage.setItem(checkedName, JSON.stringify(arrCurrent));
}
}
$(function() {
actLocalStorage('ready');
actChecked('ready'); /* добавим новую функцию в выполнение при загрузке страницы */
});
$('body').on('change', '.check', function(){
var replace = '';
var elements = $(this).parent().siblings('.copy, .copy-2');
var modal = $('.modal');
$(elements).each(function() {
replace += this.outerHTML.replace(/(<|<\/)p/g, '$1span');
});
if ($('input').is(':checked')) {
if (!modal.children().is('.item')) modal.html('');
} else {
modal.removeClass('modal-show').text('Здесь ничего нет');
}
var wrapReplace = '<div class="item">' + replace + '</div>';
actChecked($(this).attr('id')); /* выполняем новую функцию, параметром передаем атрибут id текущего чекбокса */
modal.html(actLocalStorage(wrapReplace));
if ($(this).prop('checked')) {
modal.addClass('modal-show');
}
});localStorage, чтобы все корректно работало.$(function() {
localStorage.removeItem('local');
localStorage.removeItem('checked');
});После перезагрузки страницы, если снова начать активировать чекбоксы, то у меня все элементы начинают удаляться
localStorageПолучается все таки нужно стремиться к данному варианту ?
И разве нельзя сделать проверку типа:
При клике на последний параграф - в модальном окне ничего не отображается
localStorage в этом коде сделан только при клике по чекбоксу. Если хотите, чтобы модальное окно заполнялось сразу же при загрузке страницы, нужно немного дописать код. Плюс вам по идее нужно отмечать записанные чекбоксы. И вот тут как раз появляется проблема проставления записанных в localStorage чекбоксов. Как мы будет определять какие чекбоксы нужно отмечать, если им не присвоены никакие уникальные идентификаторы? По-этому в этом примере это сделать довольно сложно. Вот код, который пропишет данные из localStorage в модальное окно при загрузке страницы, но чекбоксы он не проставит. Нужно переписывать весь код для этого.function actLocalStorage(data) {
const localName = 'local';
let current = localStorage.getItem(localName);
/* добавим условие, что если параметром data мы передает строку 'ready' то нужно
просто добавить данные из localStorage в модальное окно */
if (data === 'ready') {
if (current !== null) {
return $('.modal').html(current);
} else return;
}
if (current === null) {
localStorage.setItem(localName, data);
return localStorage.getItem(localName);
}
if (current.match(data)) {
current = current.replace(data, '');
if (current) {
localStorage.setItem(localName, current)
} else {
localStorage.removeItem(localName);
}
} else {
current = current + data;
localStorage.setItem(localName, current);
}
current = localStorage.getItem(localName);
return (current === null) ? '' : current;
}
$(function() { /* функция, которая выполнится при загрузке страницы */
actLocalStorage('ready');
});
.....var backgraunig = [
[ '_bg1.jpg'],
[ '_bg2.jpg'],
[ '_bg3.jpg'],
[ '_bg4.jpg'],
];var backgraunig = [
[ '_bg1.jpg'],
[ '_bg2.jpg'],
[ '_bg3.jpg'],
[ '_bg4.jpg'],
];
backgraunig = backgraunig.map(n => { return n[0] });
const el = document.getElementById('el');
el.style.backgroundImage = 'url("/img/' + backgraunig[0] + '")';
el.addEventListener('click', function() {
const currentURL = this.style.backgroundImage.match(/url\("\/img\/(.*?)"\)/)[1];
const iof = backgraunig.indexOf(currentURL);
const i = (iof === (backgraunig.length - 1)) ? 0 : (iof + 1);
this.style.backgroundImage = 'url("/img/' + backgraunig[i] + '")';
});var backgraunig =[
'_bg1.jpg',
'_bg2.jpg',
'_bg3.jpg',
'_bg4.jpg',
];
const el = document.getElementById('el');
el.style.backgroundImage = 'url("/img/' + backgraunig[0] + '")';
el.addEventListener('click', function() {
const currentURL = this.style.backgroundImage.match(/url\("\/img\/(.*?)"\)/)[1];
const iof = backgraunig.indexOf(currentURL);
const i = (iof === (backgraunig.length - 1)) ? 0 : (iof + 1);
this.style.backgroundImage = 'url("/img/' + backgraunig[i] + '")';
});
escapeRegExpможно прописать в любом месте кода, хоть в конце. JS код сначала полностью считывается, а только потом выполняется. По-этому разницы нет.