[축구모임 홈페이지개발] 06/05 개발일지 Nodejs / 선수스탯창 개인화

아주 고민이다..

 

각 프로필 이미지 마다 각 모달로 연결시켜야하는데..

 

포토탭 처럼 동적 변수를 사용하여 해결하려했는데 뭔가 다르다.

 

그리고 안된다.

 

....

 

...

 

음

 

각 이미지마다 다 다른 열쇠가 하나 담겨있어야하고

 

이미지를 클릭하면 

 

그 열쇠로 작동을 해서 열리는 각 각의 모달이 있고.

 

그 모달에는 그 각 각의 열쇠에 반응한 정보들이 잔뜩 나와야한다.

 

...

 

알아보니

 

data-player-info 속성에 넣으면 javascript 에서 속성을 사용해 사용하기도 편해보인다.

 

심지어 - 를 이용해 복수의 데이터도 넣을 수 있고 

 

var playerInfo = img.dataset.playerInfo.split('-');
var playerId = playerInfo[0];
var playerName = playerInfo[1];

 

이렇게 - 를 빼서 데이터들을 javascript 에서 사용가능했다.

 

일단 넣어봤다.

        <img class="player-profile"

          src="https://ik.imagekit.io/wlalafg7g/GoalPostAgain/introduce/%ED%95%9C%EB%8C%80%EA%B7%9C_1.png?updatedAt=1707829275463"

          alt="33한대규" data-bs-toggle="modal" data-bs-target="#Modal33" data-player-info="33-bigstarhan33">

 

 

 

---

 

 

도저히 생각이 안 나서 씻고 와서 딱 앉았는데 생각이 바뀌었다,

 

각자의 모달이 있고 그 모달을 여는게 과연 정답일까

 

그냥 빈 모달을 열고

 

항상 해오던대로 그 모달에 해당 데이터들을 불러오는 게 정답 아닐까

 

모든 프로필 사진은 하나의 모달을 결국 여는거다.

 

이제 문제는 여기서 저 프로필사진을 클릭했다는 행동 하나로 데이터들을 어떻게 가져올 것이냐.

 

내일 휴일이니까 달려본다.