1. I wrote a WeChat applet, a Sudoku game, to determine whether it meets the requirements (Sudoku rules) based on the number entered. However, I encountered a problem, how to find the position of the number entered by the user, because it needs to be based on the number entered by the user. The position is passed into the corresponding script file to determine whether the rules are met, but because I am not very proficient in js, I cannot solve the positioning problem.
<view class="page-body">
<view class="bc" wx:for="{{numbers}}" wx:for-item="row" >
<view wx:for="{{row}}" class="bc_ bc_{{item}}" bindtap="oninput">
<input wx:if="{{item == 0}}" auto-focus wxkey="*this" maxlength="1" value="" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" type="number" style="color:#000000" bindinput="EventHandle"/>
<view wx:else>{{item}}</view>
</view>
</view>
</view>
Where numbers is an array in the script file, and the style is implemented using two loops.
It will determine whether each number is zero (the array we wrote manually at the beginning, 0 represents user input). If it is zero, no characters (strings) will be displayed here.
Here is the front-end display code and display effect. The blank space is used for users to fill in numbers, but I don’t know how to find where the user entered the numbers. I hope someone can guide me. one time.
说一下我的思路,仅供参考:
每个小方格作为一个对象,拥有x和y属性,表示第x行的第y个方格,通过外部p盒子的大小,计算每个小方格的大小,进而可以知道每个小方格的区域范围,用户点击时,获取点击点的坐标,计算落在哪个小方格里面。
总之,就是一个数学计算问题
思路:
每个方格具有 data-x='??' 和 data-y='??' 属性,用户点击的时候就可以获取到 x 和 y,然后进行后续计算和判断。
微信小程序中的event对象是经过处理的,里面含有input的value属性。
微信小程序 - 事件
具体说下我的思路:
微信小程序的event中可以存储元素设置的额外数据,例如你在dom中写入data-x的属性,那么就可以用event.target.dataset.x取出来。
如果是表单元素的话,例如input的value,则是存在event.detail.value中。
你可以给input监听一个事件,然后给元素写上data-x,data-y的属性,属性的值为numbers和row的下标(也就是index,为了避免混淆,要用wx:for-index="XXX"给两个下标别名),通过下标值确定用户点击的位置,然后存储在数组的相应位置中。