如何用 JS 抓取索引？

Question

 .tb button { width: 100px; height: 100px; border-radius: 50%; background-color: gray; border: 3px solid black; margin: 1px; } body { text-align: center; }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <div class="container"> <h1>Welcome to Connect Four:</h1> <p>The object of this game is to connect four of your chips in a row,</p> <p id="inp">.it is your turn: please pick a column to drop your blue chip.</p> <table class="tb" align="center"> <thead> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> </thead><br> <thead> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> </thead><br> <thead> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> </thead><br> <thead> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> </thead><br> <thead> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> </thead><br> <thead> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> </thead><br> </table> </div> <script src="https.//code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>

我想制作 function，它返回带有 JQuery 的单击按钮的索引。 除此之外，我想稍后将索引用于其他功能。 例如，如果我在谷歌浏览器上单击索引号 0 按钮，我希望 function 返回 0。如何使 function 与 Z686155AF75A60A0F6E9D80C1F7EDD3E 我是初学者，因此简单的编码对我来说会很高兴。

Answer 1

您可以使用$(this).parent('th').index()获取列索引

和$(this).closest('tr').index()用于行索引

也应该使用tr代替thead标签

   $("button").click(function() {
    var col_index = $(this).parent('th').index();
    var row_index = $(this).closest('tr').index();
    alert(row_index + "-" + col_index);
});

 $("button").click(function() { var col_index = $(this).parent('th').index(); var row_index = $(this).closest('tr').index(); alert(row_index + "-" + col_index); });

 .tb button { width: 100px; height: 100px; border-radius: 50%; background-color: gray; border: 3px solid black; margin: 1px; } body { text-align: center; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <div class="container"> <h1>Welcome to Connect Four:</h1> <p>The object of this game is to connect four of your chips in a row,</p> <p id="inp">.it is your turn: please pick a column to drop your blue chip.</p> <table class="tb" align="center"> <tr> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> </tr> <tr> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> </tr> <tr> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> </tr> <tr> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> <th><button type="button" name="button"></button></th> </tr> </table> </div> <script src="https.//code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>

Answer 2

由于您使用的是 jQuery，因此您可以使用index() function。

您可以定义一个全局变量，例如buttonIndex ，并在按下按钮时将索引值保存在该变量中：

let buttonIndex;

$('button').click( function() {
    buttonIndex = $(this).index();
});

现在您也可以在其他函数中使用buttonIndex 。 如果您想要相对于页面中所有按钮的索引，这就是解决方案。

希望这可以帮助。

Answer 3

您可以将 id 添加到按钮，然后单击时可以使用该 id

例如

<table>
      <thead >
        <th><button id="0-0" type="button" name="button" ></button></th>
        <th><button id="0-1" type="button" name="button"></button></th>
        ...
      </thead><br>
      <thead >
        <th><button id="1-0" type="button" name="button"></button></th>
        <th><button id="1-1" type="button" name="button"></button></th>
        ...
      </thead><br>
...
</table>

您的 Javascript 代码将是

$("button").click(function() {
    alert(this.id); // or alert($(this).attr('id'));
});