1

我正在尝试在我的 div 中找到图像位置

我的 HTML

<div>
  <p>test</p>
  <img src='test1.jpg'/>  
  <p>test</p>
  <p>test</p>  
  <img src='test2.jpg'/>  
  <p>test</p>
  <img src='test2.jpg'/>  --the user clicks this image and I want to know the time it appears. In this case, 2 is what I need.
  <p>test</p>
  <img src='test2.jpg'/>
  <p>test</p>
</div>

我有

var imagePosition=0;
$('img').click(function(){
     var imgSource=$(this).attr('src');
    $(this).closest('div').find('img').each(function(){
       if($(this).attr('src')==imgSource){
          imagePosition++;
       }
    })
})

我可以找出相同的图像出现了多少次，但我不知道用户点击了哪个图像以及它的位置。有没有办法做到这一点？非常感谢！

4

2 回答 2

3 
$('img').click(function() {
    var clickedIndex = $('img[src="'+ $(this).attr('src') +'"]').index(this) + 1;
    console.log(clickedIndex);
});

小提琴

在这里，我构建了一个与单击的具有相同源属性的图像的属性搜索，然后调用.index(element)传递单击的元素作为参考。与0-basedindex一样，我们添加 1。

如果拥有相同的祖先很重要，div只需按照最初的方式调整它：closestfind

var clickedIndex = 
     $(this).closest('div')
    .find('img[src="'+ $(this).attr('src') +'"]').index(this) + 1;

更新的小提琴

要获得对单击图像的引用，只需this在处理程序中使用关键字。您可以将其包装在 jQuery 对象$(this)中，然后在其上调用 jQuery 方法。

另外，通过您问题的代码注释，我假设position您实际上是指index元素的，但如果您希望获得元素的字面位置，则可以使用.offset()(relative to document) 和.position()(relative to parent) 方法。

旁注：如果您需要计算具有相同来源的图像数量，您可以通过以下方式以更简单的方式完成.length：

var countImages = $('img[src="'+ $(this).attr('src') +'"]').length;

this同样，以上假设在引用图像元素的事件处理程序范围内。您可以轻松地调整它以查询任何内容src。

于 2013-02-13T04:04:28.893 回答
1

您可以使用索引

   $('img').click(function(){

         index =  $(this).closest('div').find('img').index(this) + 1;

   });
于 2013-02-13T04:04:36.337 回答