[英]How can I grab the index with JS?
.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>
I want to make the function that returns the index of a clicked button with JQuery.我想制作 function,它返回带有 JQuery 的单击按钮的索引。 In addition to that, I want to make use of the index later for other functions.除此之外,我想稍后将索引用于其他功能。 For example, if I click the index number 0 button on Google Chrome, I want the function to return 0. How can I make the function with JavaScript?例如,如果我在谷歌浏览器上单击索引号 0 按钮,我希望 function 返回 0。如何使 function 与 Z686155AF75A60A0F6E9D80C1F7EDD3E I am a beginner, therefore plain coding would be happy for me.我是初学者,因此简单的编码对我来说会很高兴。
You can use $(this).parent('th').index()
for get column index您可以使用$(this).parent('th').index()
获取列索引
and $(this).closest('tr').index()
for row index和$(this).closest('tr').index()
用于行索引
also should use tr
instead thead
tag也应该使用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>
Since you're using jQuery, you can use the index()
function.由于您使用的是 jQuery,因此您可以使用index()
function。
You can define a global variable, for instance buttonIndex
, and when a button is pressed save the index value in that variable:您可以定义一个全局变量,例如buttonIndex
,并在按下按钮时将索引值保存在该变量中:
let buttonIndex;
$('button').click( function() {
buttonIndex = $(this).index();
});
Now you can use buttonIndex
in other functions as well.现在您也可以在其他函数中使用buttonIndex
。 This is the solution if you want the index relative to all the buttons in your page.如果您想要相对于页面中所有按钮的索引,这就是解决方案。
Hope this helps.希望这可以帮助。
You can add the id to the button and then on click you can use that id您可以将 id 添加到按钮,然后单击时可以使用该 id
For eg例如
<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>
Your Javascript Code will be您的 Javascript 代码将是
$("button").click(function() {
alert(this.id); // or alert($(this).attr('id'));
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.