Question

I am trying to retrieve the source of an image depending on which separate image the user previously clicked on.

<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>

In my specific example, I am trying to retrieve the source of “front” when “back” is clicked. Also, it must retrieve the source of “front” in the same card.

This is what I’ve tried, but I can’t get it to work:

$(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);
          }
        });

I realize it is not retrieving the source of “front,” just the source of an image that the user has clicked on. How can I change it so it retrieves the source of “front” when “back” is clicked?

Answer 1

Here is something that may point you in the right direction:

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

Use the hasClass jQuery function to find out whether or not the element you’ve clicked on has the ‘back’ class. Then use the img.front selector to find the image with the front class and retrieve it’s source.