javascript - WeChat 애플릿의 js 프런트엔드에서 입력 위치 지정 문제

Question

1. 입력한 숫자를 기준으로 요구사항(스도쿠 규칙)을 충족하는지 확인하기 위해 스도쿠 게임인 WeChat 애플릿을 작성했습니다. 그런데 사용자가 입력한 숫자의 위치를 ​​찾는 방법에 문제가 발생했습니다. 위치에 따라 이동해야 하기 때문에 해당 스크립트 파일에 데이터를 전달하여 규칙이 맞는지 확인하지만 js에 능숙하지 않기 때문에 위치 문제를 해결할 수 없습니다.

1. <view class="page-body">

   으아아아

   </view>

number는 스크립트 파일의 배열이고 스타일은 두 개의 루프를 사용하여 구현됩니다.
각 숫자가 0인지 확인합니다(처음에 수동으로 작성한 배열, 0은 사용자 입력을 나타냄). 0이면 여기에 문자(문자열)가 표시되지 않습니다.

여기에 프론트엔드 디스플레이 코드와 디스플레이 효과가 있습니다. 공백은 사용자가 숫자를 입력하는 곳인데, 사용자가 숫자를 입력한 위치를 찾는 방법을 모르겠습니다. 나한테 좀 안내해줘.

Answer 1

참고용으로 내 아이디어에 대해 이야기해 보겠습니다.
각 작은 사각형은 x 및 y 속성을 갖는 개체로, x번째 행의 y번째 사각형을 나타냅니다. p 상자 그리드의 크기와 각 작은 사각형의 영역 범위를 알 수 있습니다. 사용자가 클릭하면 클릭 지점의 좌표가 얻어지고 그 안에 어떤 작은 사각형이 속하는지 계산됩니다.
간단히 말하면 수학적 계산 문제입니다

Answer 2

아이디어:
각 사각형에는 data-x='??' 및 data-y='??' 속성이 있으며, 사용자가 클릭하면 x와 y를 얻은 다음 후속 계산과 판단을 수행할 수 있습니다.

Answer 3

WeChat 애플릿의 이벤트 개체가 처리되고 입력의 값 속성을 포함합니다.
WeChat 미니 프로그램 - 이벤트

내 생각을 자세히 설명하겠습니다.
WeChat 애플릿의 이벤트는 요소별로 설정된 추가 데이터를 저장할 수 있습니다. 예를 들어 dom에 data-x 속성을 쓰면 event.target.dataset.x를 사용할 수 있습니다. 그것을 꺼내기 위해.
입력값 등 양식 요소인 경우 event.detail.value에 저장됩니다.
입력을 위해 이벤트를 수신한 후 요소에 data-x 및 data-y의 속성을 쓸 수 있습니다. 속성의 값은 숫자와 행의 첨자(즉, 인덱스입니다. 혼동을 피하기 위해, wx:for-index ="XXX" 를 사용하면 두 개의 아래 첨자 별칭이 제공됨) 아래 첨자 값을 통해 사용자의 클릭 위치를 확인한 다음 이를 배열의 해당 위치에 저장합니다.

으아아아