Question

我有一张带有ID的表格，里面有数百个元素。每个<td>内部都有<label><input type="checkbox"></label>。一个标签有特定的类，它是游戏中的英雄。如果你点击他的复选框和另一个复选框，他需要移动到该复选框。他可以上/下/左/右/对角移动最多3个字段。怎么办？我认为我应该以某种方式区分第一个复选框的位置，然后是第二个，然后是distance = (abs(hero_poz - field_poz))，然后是distance <= 3，但我如何获得这些位置？

这是html：

<table id="table">
    <tbody>
        <tr>
            <td>
                <label class="hero hero1">
                    <input type="checkbox">
                </label>
            </td>
            <td>
                <label class="hero hero2">
                    <input type="checkbox">
                </label>
            </td>
            <td>
                <label>
                    <input type="checkbox">
                </label>
            </td>
        </tr>
        <tr>
            <td>
                <label>
                    <input type="checkbox">
                </label>
            </td>
            <td>
                <label>
                    <input type="checkbox">
                </label>
            </td>
            <td>
                <label>
                    <input type="checkbox">
                </label>
            </td>
        </tr>
        <tr>
            <td>
                <label>
                    <input type="checkbox">
                </label>
            </td>
            <td>
                <label>
                    <input type="checkbox">
                </label>
            </td>
            <td>
                <label>
                    <input type="checkbox">
                </label>
            </td>
        </tr>
    </tbody>
</table>
<button type="button" id="jump">Move</button>

这是js

$( document ).ready(function() {
    $('input[type="checkbox"]').click(function() {
        var cellAndRow;
        var cellAndRow2;
        var cellIndex;
        var cellIndex2;
        var rowIndex;
        var rowIndex2;
        if ($('input:checked').length == 1) {
            cellAndRow = $(this).parents('td,tr');
            cellIndex = cellAndRow[0].cellIndex;
            rowIndex = cellAndRow[1].rowIndex;
            alert(cellIndex + ":" + rowIndex);
        }else if ($('input:checked').length == 2) {
            cellAndRow2 = $(this).parents('td,tr');
            cellIndex2 = cellAndRow2[0].cellIndex;
            rowIndex2 = cellAndRow2[1].rowIndex;
            alert("1st " + cellIndex + ":" + rowIndex + "2nd " + cellIndex2 + ":" + rowIndex2);
        }else if ($('input:checked').length > 2) {
            this.checked = false;
            alert('Select the hero and field, on which he will move');
        }else if (!$('input:checked').parent().hasClass('hero')) {
            this.checked = false;
            alert('Select hero!');
        }
    });
    $("#jump").click(function(){
        if ($('input:checked').parent().hasClass('hero1')){ 
            $('input:checked').parent().toggleClass('hero1');
        }else if ($('input:checked').parent().hasClass('hero2')){
            $('input:checked').parent().toggleClass('hero2');
        }
        $('input:checked').prop('checked', false);
    });
});

这是full code

Answer 1

你可以尝试给你的所有复选框一个id或一个名字来区分它们，我之前从未玩过这个游戏我认为它是否正在使用＆＃34; grid＆＃34;您可以尝试将id归为数字，以便更容易操作

<input id="1" type="checkbox">

和你在JS：

$(this).attr('id')...

Answer 2

屏幕上的位置以左上角的像素坐标表示。要获取元素的位置，请尝试$('input:checked').position()。这将创建一个像{top: 214, left: 468}这样的对象，所以要从顶部获取位置，请尝试

$('input:checked').position().top

从左边

$('input:checked').position().left

同样地，对于你的英雄：

$('.hero').position().top

$('.hero').position().left

如何区分第一和第二个复选框？

2 个答案: