當另一個圖像被點擊時檢索圖像源？

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/