모달에서 이미지를 클릭하여 여러 이미지를 변경하고 싶습니다.

Question

팝업/모달에는 gsap.js를 사용합니다. 나는 forEach를 사용하여 이 사이트에 동일한 부분을 얼마나 많이 추가하더라도 제대로 작동할 것입니다. 나의 유일한 목표는 어떻게든 지금 이 작업을 완벽하게 만드는 것입니다. 팝업되는 "버튼"을 클릭할 때마다 9개의 이미지가 표시되고 그 중 4개를 선택한 다음 "편집 내용 저장"을 클릭하고 "편집 내용 저장"을 누르면 본문 텍스트 이미지에 4개의 이미지 본문이 있는 경우, 자동으로 변경됩니다. 그리고 당신은 그것을 계속해서 변경할 수 있습니다.

으아악 으아악 으아악

Answer 1

이것이 내 방법이다. 이 솔루션을 개발할 때 GsapJS 라이브러리는 장애물이 아니었습니다. 귀하의 이미지가 자동으로 게시 취소되었기 때문에 이미지를 별도로 게시했음을 알 수 있습니다.

저장하지 않으면 변경사항이 표시되지 않습니다. 여기서 사용자가 선택하는 칩의 개수는 4개입니다. 최소 4개의 칩을 선택하지 않고 더 많은 것을 선택하거나 편집 내용을 저장하려고 할 때마다 경고가 표시됩니다. 따라서 새 칩을 선택하기 전에 회색 칩의 선택을 취소해야 합니다. 여기서는 "코인" 대신 "칩"이라는 용어를 사용했습니다.

제가 사용한 도구는 클릭했을 때 칩이 뒤집히는 것처럼 보이게 만드는 CSS 애니메이션이었습니다. 이 자료/소스는 내 작업에 도움이 됩니다.

w3school
bobbyhadz

으아아아 으아아아 으아아아