モーダル内の画像をクリックして複数の画像を変更したい

Question

ポップアップ/モーダルに gsap.js を使用しています。私は forEach を使用しているので、このサイトに同じ部分をいくつ追加しても問題なく動作します。私の唯一の目標は、これを何とか完璧に動作させることです。ポップアップされる「ボタン」をクリックするたびに、9 つの画像が表示され、そのうちの 4 つを選択して「編集を保存」をクリックします。「編集を保存」を押すと、本文が表示されます。画像に 4 つの画像本体が含まれている場合、自動的に変わります。そして何度でも変更できます。

リーリー リーリー リーリー

Answer 1

これは私の方法です。このソリューションを開発する際、GsapJS ライブラリは障害にはなりませんでした。画像は自動的に非公開になっているため、画像を個別に公開したことがわかります。

保存しない限り、変更内容は表示されません。ここでユーザーが選択するチップの数は 4 です。少なくとも 4 つのチップが選択されていない状態でさらに選択したり編集を保存しようとすると、警告が表示されます。したがって、新しいチップを選択する前に、灰色のチップの選択を解除する必要があります。ここでは「コイン」ではなく「チップ」という用語を使用しています。

私が使用するツールは、クリックするとチップが反転するように見せるための CSS アニメーションです。これらの資料/ソースは私の仕事に役立ちます。

w3スクール
ボビーハズ

リーリー リーリー リーリー