检查点击了哪个元素

Question

我目前有一些图片，当点击它们时，它会弹出如下警告：

＆＃13;

＆＃13;

$('.image').click( function() { alert( 'Clicked it!' ); } );

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="imageHolder" style="width: 80%; display:  inline;">
	<div class="image">
		<img src="//i.stack.imgur.com/nO2hl.png">
	</div>
	<div class="image">
		<img src="//i.stack.imgur.com/IkjJW.png">
	</div>
	<div class="image">
		<img src="//i.stack.imgur.com/QrKSV.png">
	</div>
</div>

＆＃13;

＆＃13;

＆＃13;

如何修改此项，以便在第一张图片被点击时，它会发出警告，而＃34; 1点击了＃34;如果第二张图片被点击，它会发出警告，而＃34; 2则是固定的＆＃34;等等...

Answer 1

您可以使用JQuery .index()方法并将点击的div的索引连接到alert中的字符串。

由于JS中数组的第一个索引是0，因此如果要从1开始，还必须将1添加到返回的索引中。试试下面的代码：

＆＃13;

＆＃13;

$(document).ready(function() {
  $('.image').click(function() {
    alert($(this).index() + 1 + ' was clicked!');
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="imageHolder" style="width: 80%; display: inline;">
  <div class="image">
    <img src="//i.stack.imgur.com/nO2hl.png">
  </div>
  <div class="image">
    <img src="//i.stack.imgur.com/IkjJW.png">
  </div>
  <div class="image">
    <img src="//i.stack.imgur.com/QrKSV.png">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;