javascript - 单击时尝试获取图像数组的索引

Question

function openGallery(){
    console.log($(this).index()); 
}

$("body").on( "click", "#gallery img", openGallery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="grid-x grid-padding-x section-content" id="gallery">
<div class="cell small-12">
	<h1>Gallery</h1>
</div>

<div class="cell small-12">
	<section class="grid-x grid-padding-x small-up-2 medium-up-4 large-up-6">
<div class="cell"><img src="img/gallery/gallery-1-sm.jpg" alt="gallery 1"></div>
<div class="cell"><img src="img/gallery/gallery-2-sm.jpg" alt="gallery 2"></div>
<div class="cell"><img src="img/gallery/gallery-3-sm.jpg" alt="gallery 3"></div>
<div class="cell"><img src="img/gallery/gallery-4-sm.jpg" alt="gallery 4"></div>
<div class="cell"><img src="img/gallery/gallery-5-sm.jpg" alt="gallery 5"></div>
<div class="cell"><img src="img/gallery/gallery-6-sm.jpg" alt="gallery 6"></div>
</section>	
</div>
</section>

//我一直得到 0 作为点击内容的索引谷。我想我错过了一些非常简单的东西。

Answer 1

将 $(this).index() 替换为 $(this).index('img')

有关使用 jQuery .index() 函数的更多信息 Click Here

function openGallery() {
  console.log($(this).index('img'));
}

$(document).on("click", "#gallery img", openGallery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="gallery">
  <div class="cell"><img src="img/gallery/gallery-1-sm.jpg" alt="gallery 1"></div>
  <div class="cell"><img src="img/gallery/gallery-2-sm.jpg" alt="gallery 2"></div>
  <div class="cell"><img src="img/gallery/gallery-1-sm.jpg" alt="gallery 1"></div>
  <div class="cell"><img src="img/gallery/gallery-1-sm.jpg" alt="gallery 1"></div>
  <div class="cell"><img src="img/gallery/gallery-1-sm.jpg" alt="gallery 1"></div>
  <div class="cell"><img src="img/gallery/gallery-1-sm.jpg" alt="gallery 1"></div>
</section>

如果您有任何疑问，请在下面留言，我会尽快回复您。

希望这对您有所帮助，祝您编码愉快!