Как заставить «Результаты по строкам» (из «выбранной записи» в «выпадающем меню») отображаться правильно? [закрыто] ⇐ CSS

[Anonymous]

Любитель кодирования пытается понять, как: «Создать цифровой архив».
более конкретно:
А.) «когда кто-то наткнется на эту веб-страницу (только HTML/CSS/JavaScript), он увидит список элементов (при наведении указателя мыши на такой элемент масштаб увеличивается).
B.) Список элементов, которые они увидят, будет следующим: 3 записи в строке, 5 записей в строке или 10 записей в строке (почти как если бы вы просматривали чей-то архив произведений искусства. (a). случайный прохожий может щелкнуть в раскрывающемся меню, если он хочет увидеть одновременно «3, 5 или 10» изображений (это код, над которым мы сегодня вместе работаем).
C.) Я закодировал что-то, что показывает по 3 записи в строке.
C.1) Я застрял, я не знаю, какой метод/код/возможность перемещения лучше всего. вперед. Нравится:
C.1.1) Если случайный человек заходит на мою веб-страницу и хочет увидеть «5 записей в строке». Как мне отобразить «изображение номер 4»? вверх после третьей записи, но затем ОТКАЗЫВАЕТСЯ НА СЛЕДУЮЩУЮ СТРОКУ, если кто-то выберет «они предпочли бы видеть по 3 записи в строке».
Вот предоставленный мной код, прежде чем я продолжу:< /p>

Код: Выделить всё

Digital Archive 3-5-10 Images Per Row

.CenterOfCardCreationPage {
text-align: center;
}
.ContainerForCardCreationContainer {
flex-direction: column;
}
.CardCreationContainer {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
padding: 20px;
}
.CardCreationColumn {
flex: 0 0 30%;
margin: 10px;
padding: 10px;
text-align: center;
}
.CardCreationButton {
display: inline-block;
padding: 10px 20px;
color: white;
text-decoration: none;
border: none;
cursor: pointer;
}
.CardCreationImage {
width: 100%;
height: auto;
object-fit: contain;
}
@media (max-width: 600px) {
.CardCreationColumn {
flex: 0 0 45%;
}
}
@media (max-width: 400px) {
.CardCreationColumn {
flex: 0 0 90%;
}
}




Items Per Page: 3,5 or 10?
How many Results would you like?

3
5
10





Upload Image





Upload Image





Upload Image







Upload Image





Upload Image





Upload Image







Upload Image





Upload Image





Upload Image








Thank you for checking this code out!


//the code below is the stuff for dropdownmenu
const resultsPerPageSelect = document.getElementById('resultsPerPage');
const cardCreationContainers = document.getElementsByClassName('CardCreationContainer');
resultsPerPageSelect.addEventListener('change', (event) => {
const selectedOption = parseInt(event.target.value, 10);
for (let i = 0; i < cardCreationContainers.length; i++) {
if (i < selectedOption) {
cardCreationContainers[i].style.display = 'flex';
} else {
cardCreationContainers[i].style.display = 'none';
}
}
});
// Initial display based on the selected option
resultsPerPageSelect.dispatchEvent(new Event('change'));
// the stuff below is the code for uploading images
let uploadedImages = 0;
// Function to handle image upload
function uploadImage(CardCreationColumnNumber) {
const input = document.createElement('input');
input.type = 'file';
input.accept = 'image/*';
input.onchange = function () {
const file = this.files[0];
const reader = new FileReader();

reader.onload = function () {
const imagePlaceholder = document.getElementById(`image${CardCreationColumnNumber}`);
imagePlaceholder.src = reader.result;
uploadedImages++;
// Enable the second button if the first image is uploaded
if (CardCreationColumnNumber === 1) {
const secondButton = document.getElementById('uploadButton27');
secondButton.disabled = false;
}
};
reader.readAsDataURL(file);
};
input.click();
}

C.1.2.) Например, я пытался подключить «четвертое и пятое изображения» (а затем с 6 по 10) в первую строку (и такие эквиваленты в вторые два ряда), но это не сработало. когда кто-то менял число строк с 5 обратно на 3 или с 10 строк обратно на 3, те «идентификаторы, которые представляли другие изображения, исчезали из поля зрения, и только следующий видимый набор строк отображал их идентификаторы».
D.) Что приводит к моему вопросу (поскольку я думаю, что вижу это слишком много с одной точки зрения и не хочу отказываться от этого, потому что я работал над этим в течение горячей минуты). «Как мне правильно исправить/обновить это, чтобы, когда случайный прохожий увидит эту веб-страницу, он мог выбрать, хотят ли они видеть 3, 5, 10 результатов/изображений в каждом ряду, и если и когда они когда-нибудь захотят изменить ее обратно на 3 изображения в каждой строке, мы не теряем изображения с номерами 4–10 в первой строке только для того, чтобы во второй строке отображались первые 3 варианта (это были бы изображения 11, 12, 13 (а затем третья строка, показывающая изображения 21, 22) , & 23) вместо того, чтобы просто «изображения 4,5,6 удаляются из первого ряда и помещаются во второй ряд; а изображения 7, 8 и 9 помещаются в третий ряд».
(Примечание: полунесвязанное примечание по этому вопросу: кажется, я продолжал говорить: «Результатов на страницу», когда я имел в виду «Результатов на строку», я редактировал его здесь и там, но если я что-то пропустил - мое b- но вот что я имею в виду. Результаты на странице были бы крутыми, но это не цель на данный момент.)
Вы поняли, о чем я спрашиваю? Я застрял в том, как двигаться вперед; любая помощь (или даже любой мудрый совет о том, как лучше справиться с этой проблемой) будет принята с благодарностью!
-Шола

Подробнее здесь: https://stackoverflow.com/questions/789 ... -menu-to-s