当另一个图像被点击时检索图像源？

Question

我试图根据用户以前点击过的哪个单独的图像检索图像的来源。

<div class="card1"> 
    <div> 
    <a href="#" class="quickFlipCta"><img class="back" src="Memory Pals/Test Pictures/QuestionMark.gif" /></a> 
    </div> 

    <div> 
    <a href="#" class="quickFlipCta"><img class="front" src="Memory Pals/Test Pictures/flower.gif" /></a> 
    </div> 
</div> 

<div class="card2"> 
    <div> 
    <a href="#" class="quickFlipCta"><img class="back" src="Memory Pals/Test Pictures/QuestionMark.gif" /></a> 
    </div> 

    <div> 
    <a href="#" class="quickFlipCta"><img class="front" src="Memory Pals/Test Pictures/flower.gif" /></a> 
    </div> 
</div> 

在我的具体示例中，我试图在单击“返回”时检索“前”的源。此外，它必须检索同一张卡片中的“前”的来源。

这是我尝试过，但我无法得到它的工作：

$(document).ready(function(){ 

     var found = 0; 
     var last = null; 

     $('img').each(function(index){ 
      $(this).attr('id','img-' + index); 
     });  

     $('img').click(function(){ 
      if(last) { 
      if(($(this).attr('src') == last.attr('src'))) { 
       $(this).css('visibility', 'hidden'); 
       last.css('visibility', 'hidden'); 
       found++; 
      } 
      if (found == 3) { 
      window.location.href = "#play2"; 
      location.reload(); //resets found to 0 
      } 
      last = null; 
      } else { 
      last = $(this); 
      } 
     }); 

我意识到它不会检索源“前，”只是该图像的源用户点击了。如何更改它，以便在单击“返回”时检索“前”的来源？

Answer 1

这里是东西，可能你指出正确的方向：

$('img.back').click(function() { 
    var frontSrc = $('img.front').first().attr('src'); 
    alert('The source for \'front\' is ' + frontSrc); 
    } 
}); // end .click handler 

使用hasClass jQuery的功能，以找出是否你已经点击了“返回”类的元素。然后使用img.front选择器查找具有前类的图像并检索其源。

Answer 2

这是你在找什么？

$('img').click(function(){ 
    console.log($(this) 
      .closest('div[class*=card]') // <-- get closest div with class containing card 
      .find('div > a > img') // <-- find all img under that div 
      .not(this) // <-- filter out the clicked one 
      .attr('src')); // <-- get src of the image not clicked under same div with class containing card 
});​ 

http://jsfiddle.net/gweVT/