JavaScript не работает так, как мы ожидали, при преобразовании карты из исходного положения. ⇐ CSS

[Anonymous]

У меня есть несколько карт в card_section, а в card также есть элемент div с именем card_img. Я писал запрос для каждой карты, который, когда мы нажимаем на любую карту, card_img меняет свое положение слева от card_section через свойство Transform, но его родительский элемент означает, что card не меняет своего положения. Но в этом случае мы не знаем, сколько карточек находится в одной строке, поэтому мы создаем функцию getCardsPerRow для расчета количества карточек в строке, а затем, наконец, если ширина card_section< /code> изменяется, функция getCardsPerRow также меняется.
Я утверждаю, что мои запросы работают нормально для первой строки, независимо от того, имеет ли она 2 карты, 3 карта или 5, но во второй строке она не работает должным образом.
Ниже приведен код:

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

// Function to calculate the number of cards per row dynamically
function getCardsPerRow() {
const cardSection = document.querySelector(".card_section");
const card = document.querySelector(".card");

if (!card || !cardSection) return 1; // Default to 1 if elements are not found

const containerWidth = cardSection.offsetWidth;

const cardStyle = getComputedStyle(card);
const cardWidth = card.offsetWidth;
const cardMarginLeft = parseFloat(cardStyle.marginLeft);
const cardMarginRight = parseFloat(cardStyle.marginRight);
const totalCardWidth = cardWidth + cardMarginLeft + cardMarginRight;

return Math.floor(containerWidth / totalCardWidth);
}

// Main script
const cards = document.querySelectorAll(".card");
const root = document.documentElement; // Refers to :root in CSS

// Function to update the card behaviors dynamically
function setupCardTransformations() {
const cardsPerRow = getCardsPerRow(); // Calculate cards per row dynamically

cards.forEach((card, index) => {
card.addEventListener("click", () => {
const columnIndex = index % cardsPerRow; // Column index (0, 1, 2, etc.)
const rowIndex = Math.floor(index / cardsPerRow); // Row index (0, 1, 2, etc.)

// Calculate offsets based on column position
const offsetPercent = -100 * columnIndex; // Percentage offset for column
const offsetPixel = -20 * columnIndex; // Pixel offset for column

// Update CSS variables dynamically
root.style.setProperty("--offset-percent", `${offsetPercent}%`);
root.style.setProperty("--offset-pixel", `${offsetPixel}px`);

// Add transform class to clicked card
const img = card.querySelector(".card_img");
img.classList.toggle("transform_to_left");

// Optionally remove the class from other cards
cards.forEach((otherCard) => {
if (otherCard !== card) {
otherCard.querySelector(".card_img").classList.remove(
"transform_to_left");
}
});
});
});
}

// Initialize card transformations and update on resize
setupCardTransformations();
window.addEventListener("resize", () => {
setupCardTransformations();  // Recalculate and rebind the logic on resize
});

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

.team_main_container {
border: 2px solid red;
width: 100%;
height: 100%;
display: flex;
align-items: flex-start;
justify-content: center;
}

.team_main_container .team_cards_container {
border: 2px solid green;
width: 90%;
height: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
}

.team_main_container .team_cards_container .card_section {
border: 2px solid red;
width: 100%;
display: flex;
flex-wrap: wrap;
gap: 20px;
}

.team_main_container .team_cards_container .card_section .card {
width: calc((100% / 6) - 16px);
height: 30rem;
cursor: pointer;
border: 2px solid red;
position: relative;
}

.team_main_container .team_cards_container .card_section .card .card_img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease-in-out;
background-color: #2b2525;
color: #fff;
border: 2px solid #45ba00;
}

:root {
--offset-percent: 0%;
/* Default percentage offset */
--offset-pixel: 0px;
/* Default pixel offset */
}

.team_main_container .team_cards_container .card_section .card .card_img.transform_to_left {
transform: translateX(calc(var(--offset-percent) + var(--offset-pixel)));
transition: transform 0.3s ease;
/* Add a smooth transition */
}

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

Card 1


Card 2


Card 3


Card 4


Card 5


Card 6


Card 7


Card 8


Card 9


Card 10

Подробнее здесь: https://stackoverflow.com/questions/792 ... ard-from-i