сравнение изображения src jquery

Question

Я делаю игру, где есть 12 карт, перевернутых вверх ногами. Когда вы нажимаете на карту, она переворачивается с изображением, на каждом из двух изображений есть всего 6 изображений на 12 картах. точка должна соответствовать этим изображениям. У меня возникли проблемы по сравнению, если IMG SRC одинаковы из перевернутого изображения здесь то, что я до сих пор:

http://jsfiddle.net/LbcHf/1/

<div class="container"> 
<div class="row"> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 
<div class="row"> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 
<div class="row"> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 
</div> 
<form> 
<input type="button" value="Play again"> 
</form> 

Answer 1

Скрипт должен выглядеть следующим образом:

var lastSelected; 
$(document).ready(function(){ 
    addImg(); 
    start(); 
    click(); 
}); 

function check(el){ 
    if($(lastSelected).attr("src") == $(el).find("img").attr("src") && $(lastSelected).hasClass("visible")) { 
      // do sth. with $(this) 
      alert("gotcha!"); 
    } 
    lastSelected = $(el).find("img"); 
} 

function start(){ 
    $("div.row div img").addClass("hidden"); 
}; 

function click(){ 
    $("div.row div").each(function(){ 
     $(this).click(function(){ 
     if($("img", this).hasClass("hidden")){ 
      $("img",this).removeClass("hidden"); 
      $("img",this).addClass("visible"); 
      check($(this)); 

     }else if($("img",this).hasClass("visible")){ 
      $("img",this).removeClass("visible"); 
      $("img",this).addClass("hidden"); 
     } 

     }); 

    }); 

}; 

function addImg(){ 

    var images = ["http://efreeman.userworld.com/jQuery/images/cheese.gif","http://efreeman.userworld.com/jQuery/images/eggs.gif","http://efreeman.userworld.com/jQuery/images/kitchen_blender.gif","http://efreeman.userworld.com/jQuery/images/tea.gif","http://efreeman.userworld.com/jQuery/images/kitchen_collander.gif","http://efreeman.userworld.com/jQuery/images/kitchen_teapot.gif"]; 

var imagesused = []; 
$('.container div:not(.row)').each(function() { 
    var rand = Math.floor(Math.random() * images.length); 
    $(this).append('<img src="' + images[rand] + '"/>'); 
    if (imagesused.indexOf(images[rand]) != -1) images.splice(rand, 1); 
    else imagesused.push(images[rand]); 
    console.log(images); 

}); 
} 

Answer 2

Вы должны сделать что-то вроде этого:

function check(){ 
    $('img.visible:not(.correct):eq(0)').attr('src') == $('img.visible:not(.correct):eq(1)').attr('src'))){ 
     $('img.visible:not(.correct)').addClass('correct') 
    } 
} 

Так что если карты повернуты, и они оба оба вы добавите class к ним, чтобы в следующий раз они не будут проверены. Таким образом, вы можете проверить только две карты, которые вы только что перевернули.

Answer 3

Поскольку у вас есть свой код прямо сейчас, он требует некоторого рефакторинга. Но чтобы ответить на ваш вопрос, сразу же, это это просто:

var last; 
function click(){ 
    $("div.row div").each(function(){ 
     // ..snip.. 

      // added code 
      console.log(last == $("img",this).attr("src")); 
      last = $("img",this).attr("src"); 

Причина, почему я не буду вдаваться в подробности, потому что я предполагаю, что вы хотите только две карты, чтобы быть лицом вверх, в то время, так нет никаких причин, чтобы перебирать все видимые карты.

Answer 4

Я принимаю тот же урок JQuery в O'Reilly школе онлайн http://www.oreillyschool.com

Ответ на этот вопрос находится здесь: http://jsfiddle.net/jmccommas/AhPfV/

JQuery код для использования

var lastSelected; 
    var score = 0; 
    var boxopened = ""; 
    var imgopened = ""; 
    var num = 0; 
    var moves = 0; 
    $(function() { 
     $("div.row div img").addClass('hidden'); 
     addImg(); 
     click(); 
     check(); 
     shuffle(); 


    }); 

    function randomFromTo(from, to) { 
     return Math.floor(Math.random() * (to - from + 1) + from); 
    } 

    function shuffle() { 
     var children = $("#boxcard").children(); 
     var child = $("#boxcard div:first-child"); 

     var array_img = new Array(); 

     for (i = 0; i < children.length; i++) { 
      array_img[i] = $("#" + child.attr("id") + " img").attr("src"); 
      child = child.next(); 
     } 

     var child = $("#boxcard div:first-child"); 

     for (z = 0; z < children.length; z++) { 
      randIndex = randomFromTo(0, array_img.length - 1); 

      // set new image 
      $("#" + child.attr("id") + " img").attr("src", array_img[randIndex]); 
      array_img.splice(randIndex, 1); 

      child = child.next(); 
     } 
    } 


    function check(el) { 

     if ($(lastSelected).attr("src") == $(el).find("img").attr("src") && $(lastSelected).hasClass("visible")) { 
      score = 0 + 2; 
      alert("Congradulation! You scored!!" + " " + score + " Points"); 
     } 

     lastSelected = $(el).find("img"); 
     clearAll(); 

    } 


    function click() { 

     var boxes = $(".row img").size(); 
     $(".row div").click(function() { 
      moves++; 
      $(".totalmoves").html(moves); 
      $(".cover").css({ 
       "z-index": "9999" 
      }); 
      $(this).children("img").animate({ 
       "opacity": "1" 
      }, function() { 
       num++; 
       var id1 = $("img.selected").attr("src"); 
       var id2 = $(this).attr("src"); 
       $(this).addClass("selected"); 

       if (num == 2) { 
        num = 0; 
        if (id1 == id2) { 
         $(".selected").removeClass("selected"); 
         score = score + 2; 
         alert("Congradulation! You scored!!" + " " + score + " Points"); 
         boxes = boxes - 2; 
         if (boxes == 0) { 
          alert("Game Over Your Total Score is :" + score + " Points"); 
         } 

         $(".yourscore").html(score); 
        } else { 
         speed = 100; 
         $(".selected").animate({ 
          "opacity": "0" 
         }, 400, function() { 
          $(".selected").removeClass("selected"); 
          if (score > 1) { 
           score = score - 0.5; 
           $(".yourscore").html(score); 
          } 
         }); 
        } 
       } else { 
        speed = 100; 
       } 

       $(this).animate({ 
        "padding": "0.1" 
       }, speed, function() { 
        $(".cover").css({ 
         "z-index": "-9999" 
        }); 
       }); 
      }); 

     }); 


    }; 

    // add Random Images 
    function addImg() { 

     var images = ["http://courses.oreillyschool.com/jquery/QuizzesAndProjects/images/cheese.gif", "http://courses.oreillyschool.com/jquery/QuizzesAndProjects/images/eggs.gif", "http://courses.oreillyschool.com/jquery/QuizzesAndProjects/images/kitchen_blender.gif", "http://courses.oreillyschool.com/jquery/QuizzesAndProjects/images/tea.gif", "http://courses.oreillyschool.com/jquery/QuizzesAndProjects/images/kitchen_collander.gif", "http://courses.oreillyschool.com/jquery/QuizzesAndProjects/images/kitchen_teapot.gif"]; 

     var imagesused = []; 
     $('.container div:not(.row)').each(function() { 
      var rand = Math.floor(Math.random() * images.length); 
      $(this).append('<img src="' + images[rand] + '"/>'); 
      if (imagesused.indexOf(images[rand]) != -1) images.splice(rand, 1); 
      else imagesused.push(images[rand]); 
      console.log(images); 

     }); 
    } 
    // Clear the images Button 
    var clearAll = function() { 
     $(':button').click(function() { 
      score = 0; 
      $(".yourscore").html(score); 
      moves = 0; 
      $(".totalmoves").html(moves); 
      $(".selected").removeClass("selected"); 
      $(".row img").animate({ 
       "opacity": "0" 
      }, function() { 
       $(".row img").remove(); 
       addImg(); 

      }); 




     }); 

    };