检测某个元素的位置

Detect location of certain element

本文关键字：位置 元素 检测      更新时间：2023-09-26

假设我一行有三个按钮，最后一个是"致命"按钮。有没有一种方法可以让我点击按钮1，它会告诉我距离"致命"按钮还有2个元素？或者点击按钮2，它会告诉我它离数字3只有一个空格，即"致命"按钮。

我不确定我是否已经很好地解释了这一点，所以我将链接一个设置的例子。

我希望能做一些类似扫雷员探测"地雷"的方法。

HTML

<table>
    <tr>
        <td><button id="1">Button 1</button></td>
        <td><button id="2">Button 2</button></td>
        <td><button id="3">Button 3</button></td>
    </tr>
    <tr>
        <td><button id="4">Button 4</button></td>
        <td><button id="deadly">Button 5</button></td>
        <td><button id="6">Button 6</button></td>
    </tr>  
    <tr>
        <td><button id="7">Button 7</button></td>
        <td><button id="8">Button 8</button></td>
        <td><button id="9">Button 9</button></td>
    </tr> 
</table>

我目前正在使用JQuery，所以任何使用它的解决方案仍然适用于我

FIDDLE

最简单地说，您可以使用<button>包含在其中的<td>元素的cellIndex属性：

$('button').click(function(e){
    e.preventDefault();
    var self = $(this),
        cellIndex = self.closest('td').prop('cellIndex'),
        lastCell = self.closest('tr').find('td:last-child').prop('cellIndex'),
        delta = Math.abs(lastCell - cellIndex);
    console.log( delta + (delta === 1 ? ' cell' : ' cells') + ' away from deadly cell');
});

JS Fiddle演示。

参考文献：

  • closest()
  • find()
  • prop()

使用jQuery:

$("button").click(function() {
    var myrow = $(this).parent().index();
    var mycol = $(this).index();
    var deadly = $("#deadly");
    var deadly_row = deadly.parent().index();
    var deadly_col = deadly.index();
    var x_dist = Math.abs(mycol - deadly_col);
    var y_dist = Math.abs(myrow - deadly_row);
    // Do what you want with x_dist and y_dist
});

此代码随机确定致命平方，然后检查onclick。首先，它检查坐标是否匹配，如果不匹配，则确定距离。在这里，我只是通过函数调用传递坐标。如果你想的话，你可以动态地排列你的表。这种方法的额外好处是，你不能只查看源，然后找出哪个按钮持有"致命的"

<script>
    var DeadlyX = Math.floor((Math.random() * 3) + 1);
    var DeadlyY = Math.floor((Math.random() * 3) + 1);

    function amIDeadly(x, y) {
        var r = "checking";
        if ((x == DeadlyX) && (y == DeadlyY)) {
            r = "found the deadly!";
        }
        else {
            var dx = x - DeadlyX;
            var dy = y - DeadlyY;
            var hyp = dx*dx + dy*dy;
            hyp = Math.sqrt(hyp);
            hyp = Math.floor(hyp);
            r = "you are " + hyp + " from the deadly";
        }
        document.getElementById("infobox").value = r;
    }
</script>
<table>
    <tr>
        <td>
            <button id="1" onclick="amIDeadly(1,1);">Button 1</button>
        </td>
        <td>
            <button id="2" onclick="amIDeadly(1,2);">Button 2</button>
        </td>
        <td>
            <button id="3" onclick="amIDeadly(1,3);">Button 3</button>
        </td>
    </tr>
    <tr>
        <td>
            <button id="4" onclick="amIDeadly(2,1);">Button 4</button>
        </td>
        <td>
            <button id="5" onclick="amIDeadly(2,2);">Button 5</button>
        </td>
        <td>
            <button id="6" onclick="amIDeadly(2,3);">Button 6</button>
        </td>
    </tr>
    <tr>
        <td>
            <button id="7" onclick="amIDeadly(3,1);">Button 7</button>
        </td>
        <td>
            <button id="8" onclick="amIDeadly(3,2);">Button 8</button>
        </td>
        <td>
            <button id="9" onclick="amIDeadly(3,3);">Button 9</button>
        </td>
    </tr>
</table>
<br/>
<br/>
<input id="infobox" />
相关文章：