您最多需要选择 3 张卡。
当达到限制时，关闭其余卡。
按 ID 的卡片被写入 localStorage。并且在加载页面时，我们按原样安排选择。
问题是加载时，并非所有非活动卡都变为非活动状态。并且您还可以选择更多限制。这似乎是一项初级任务，但它变成了不可能的事情。
jsFiddle https://jsfiddle.net/Vaniljs/19muw4d7/59/
const limit = 3;
var arrForCheckedItem = []; // массив для сохранения el в localStorage
document.addEventListener('click', ({ target: t }) => {
if (t.classList.contains('product')) {
if (!t.classList.contains('unchecked')) {
arrForCheckedItem = []; // обнуляем массив, чтобы не копился
t.classList.toggle('checked');
document.querySelectorAll('.product.checked').forEach(i => {
if (i.classList.contains('checked')) {
arrForCheckedItem.push(i.dataset.productid); // Сохраняем выбранные el в массив
}
})
localStorage.setItem('checked_items', arrForCheckedItem); // Сохраняем массив в localStorage
const allChecked = document.querySelectorAll('.product.checked').length >= limit;
document.querySelectorAll('.product:not(.checked)').forEach(n => {
n.classList.toggle('unchecked', allChecked);
});
}
}
console.log(localStorage.getItem('checked_items')); // Проверка содержимого в localStorage
});
// ОТМЕЧАЕМ ВЫБРАННЫЕ И НЕВЫБРАННЫЕ ПРИ ЗАГРУЗКЕ СТРАНИЦЫ
window.addEventListener('load', () => {
let arrFromStorage = localStorage.getItem('checked_items'); // выгружаем данные из localStorage
let allCards = document.querySelectorAll('.product.slick-slide'); // выбираем все карточки
if (arrFromStorage.length) { // если localStorage существует
arrFromStorage.split(',').map(itemFromStorage => { // режем строку из localStorage в массив и перебираем
allCards.forEach(itemProduct => {
if (itemProduct.dataset.productid == itemFromStorage) { // если у карточки такой же id - отмечаем ее выбранной
itemProduct.classList.add('checked')
}
if (document.querySelectorAll('.product.slick-slide.checked').length >= limit && itemProduct.dataset.productid != itemFromStorage) { // если у карточки не такой же id b выбранных меньше лимита - отмечаем ее не выбранной
itemProduct.classList.add('unchecked')
}
})
})
}
})div:not(.product) {
display: flex;
}
.product {
display: block;
width: 100px;
height: 100px;
margin: 20px;
background-color: gray;
border: 2px solid gray;
cursor: pointer;
}
.product.checked {
border: 2px solid green;
background-color: lightgray;
}
.product.unchecked {
border: 2px solid red;
background-color: darkgray;
cursor: not-allowed;
}<div>
<div class="product slick-slide" data-productid="1">1</div>
<div class="product slick-slide" data-productid="2">2</div>
<div class="product slick-slide" data-productid="3">3</div>
<div class="product slick-slide" data-productid="4">4</div>
<div class="product slick-slide" data-productid="5">5</div>
<div class="product slick-slide" data-productid="6">6</div>
</div>
从你的小提琴分叉：https ://jsfiddle.net/4h0cu1wo/
在我看来，红色的选择应该使用 css 完成。因此，可以用红色突出显示所有没有班级的人
.checked，但前提是父母有班级.limit。如果在此过程中您保存一个包含三个元素的数组的列表，然后将限制减少到一个，则只会选择第一个，因为加载实际上模拟了对卡片的连续点击。
index.js：
索引.css：
索引.html：