#javascript #arrays #onclick
#javascript #массивы #onclick
Вопрос:
Чтобы обобщить проблему, я объясню, в чем заключается задача в первую очередь.
Итак, для восточного события мы собираемся добавить 3 изображения кролика на веб-сайт (разные страницы, один и тот же домен, один и тот же веб-сайт). Как только вы найдете и нажмете на все 3 изображения, должно открыться новое окно с определенным URL.
Прямо сейчас мне удалось написать код, который сохраняет клики по 3 изображениям в массиве, а затем открывает новое окно с URL. Но, к сожалению, это не работает, как только я меняю страницу. Массив либо не сохранялся в хранилище браузера, либо перезаписывается, как только я открываю новую страницу.
Я не совсем уверен, в чем проблема прямо сейчас. Я надеюсь, что кто-нибудь из вас мог бы мне помочь.
Я пытался работать с localStorage и sessionStorage, но я не думаю, что использовал их должным образом. Я предоставлю вам свой текущий код ниже.
Javascript
$(function(){
var imageStore = [];
$('.osterhasen').click(function(e){
localStorage.id = $(this).attr('id');
// returns index of the element in the array, if the element was not found returns false
var imageExists = $.inArray(localStorage.id, imageStore);
if (imageExists >= 0){
// If element exists, do nothing
e.preventDefault;
} else {
// If element doesn't exist, add element
imageStore.push(localStorage.id);
}
localStorage.setItem('imageStore', JSON.stringify(imageStore));
localStorageimageStorage = JSON.parse(localStorage.getItem('imageStore'));
console.log(localStorageimageStorage);
if (localStorageimageStorage.length == 3) {
window.open('https://www.google.ch');
}
});
});
HTML
<body>
<div class="container">
<div id="1" class="osterhasen"><img src="img/choco.png"></img></div>
<div id="2" class="osterhasen"><img src="img/geschichte.png"></img></div>
<div id="3" class="osterhasen"><img src="img/mitarbeiter.jpg"></img></div>
</div>
</body>
В конце клики по изображениям должны сохраняться в хранилище браузера по всему веб-сайту, и как только вы найдете все 3 изображения, должно открыться новое окно с определенным URL.
Большое вам спасибо за ваше время.
С наилучшими пожеланиями
Ответ №1:
Вы не можете назначать свойства localStorage таким образом (он не существует, и вы в любом случае должны использовать его setItem метод):
localstorage.id = $(this).attr('id');
var imageExists = $.inArray(localstorage.id, imageStore);
Поэтому вместо этого назначьте id переменной:
const id = $(this).attr('id');
const imageExists = $.inArray(id, imageStore);
Комментарии:
1. Здравствуйте, спасибо за ваше время. Я не отрицал ваш комментарий, хотя. Я проверил версию, и, к сожалению, та же проблема все еще сохраняется, когда после изменения страницы массив не «сохраняется».
2. Куда вы меняете страницу? Вы знаете, что localStorage доступен только для источника документа? Если вы зайдете в свои инструменты разработки и откроете вкладку хранилище в этой рабочей демонстрации, вы сможете увидеть данные, хранящиеся в localStorage, когда вы нажмете на эти элементы.
3. В настоящее время я тестирую этот локальный файл в своем браузере. Я создал 2 html-файла, чтобы протестировать «хранение» между страницами. example.ch/page.html example.ch/page2.html ^ вот на что это похоже. Я предполагаю, что это не должно сработать? Я все еще новичок в этом.
Ответ №2:
Да, вы переопределяете ключ каждый раз. Чтобы сохранить массив так, как вы хотите, вы можете попробовать следующее:
$(function(){
var imageStore = [];
$('.osterhasen').click(function(e){
if(localStorage.getItem('imageStore') === null){ // check if such key exists
localStorage.setItem('imageStore', JSON.stringify([$(this).attr('id')])); // if it doesn't create an array with first item imageStore and set it to key imagestore
} else {
var currentStorage = JSON.parse((localStorage.getItem('imageStore')));
if(!currentStorage.includes($(this).attr('id')){ // if id doesn't exist add it.
currentStorage.push($(this).attr('id')); // push to new image inside of it
localStorage.setItem('imageStore', JSON.stringify(currentStorage)); // set the key to the new value
}
}
localStorageimageStorage = JSON.parse(localStorage.getItem('imageStore')); // you should have all the 3 pictures here in an array
console.log(localStorageimageStorage);
if (localStorageimageStorage.length == 3) {
window.open('https://www.google.ch');
}
});
});
Комментарии:
1. Здравствуйте, спасибо за ваше время. Ваша версия правильно сохраняет массив на нескольких страницах, что хорошо, но, к сожалению, возникла новая проблема. Он больше не проверяет, существует ли изображение. Если я нажму на одно и то же изображение 3 раза, оно добавит каждое из них в массив, а затем откроет URL. Каждое изображение должно быть добавлено только один раз, и как только все 3 будут «нажаты», оно должно открыть новое окно. Ценю вашу помощь!
2. @Kryptox можете ли вы проверить эту версию, я внес некоторые изменения
3. Здравствуйте, Владимир, большое вам спасибо! Это сработало отлично. Это то, что я искал. Спасибо!!
4. @Kryptox Я рад, что это помогло, надеюсь, код понятен.