0

実現したいこと

Framer.comを使って、アメコミ(Marvel)キャラクターのJSONを使った、キャラクターのカードを作ろうとしています。一枚のカードには一つのキャラクターの情報が入ります。
キャラクターのデータは10キャラクター分10枚あり、overflowしたカードをスクロールで10キャラクターを表示するのではなく、containerの設定により、キャラクターのカードをクリックするとカードが一枚一枚表示されるような動作にしたいです。

試したこと

デフォルトのCSSで、flextDirectionが"column"だったので、"row"にすると、表示が横から縦型に切り替わることに気づきました。
overflowに"scroll"と言う言葉を思いつきで入れてみると、スクロールされるようになりました。
そのため、他にも見え方を設定できる言葉があるのかな、と思っているのですが、
どのように設定できる内容を探せばよいのかプログラミング学習初心者のためわかりません。
英語力のためか、ブラウズしても探したい内容に行き着くことができませんでした。
どうぞよろしくお願いいたします。

const containerStyle = {
    height: "100%",
    display: "fixed",
    flexDirection: "row", 
    justifyContent: "center",
    alignItems: "center",
    overflow: "scroll", 
    gap: 12,
}
1

1 件の回答 1

1

以下の解決方法も例として挙げます。

1.各キャラクターカードに対して、クリックイベントを発火させるためのイベントリスナーを設定

const characterCards = document.querySelectorAll(".character-card");

characterCards.forEach(card => {
    card.addEventListener("click", () => {
        // カードの表示切り替えのロジックをここに記述
    });
});

2.クリックされたカードのみを表示するようにするために、他のカードを非表示にする処理

characterCards.forEach(card => {
    card.addEventListener("click", () => {
        characterCards.forEach(otherCard => {
            if (otherCard !== card) {
                otherCard.style.display = "none";
            }
        });
        card.style.display = "block";
    });
});

3.表示されているカードに対して、「戻る」ボタンを設置し、そのボタンをクリックした際に全てのカードを再度表示する処理を追加

const backButton = document.querySelector("#back-button");

backButton.addEventListener("click", () => {
    characterCards.forEach(card => {
        card.style.display = "flex";
    });
});

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。