이 jQuery 코드를 모두 배열에 통합하려면 어떻게해야합니까?

Question

나는 16 개의 카드를 사용하는 게임을 만들고있다. (각각 8 개의 2 개의 일치하는 카드가 있으므로 8 개의 CSS 클래스가있다.) 내 코드를 유지하는 것이 훨씬 쉬우 며 훨씬 더 깨끗하게 정리할 수 있다고 생각합니다. 배열을 사용하여이 작업을 수행 할 수 있다고 생각했지만 어떻게 처리 할 것인지 잘 모르겠습니다. (배열 변수 cardArray를 만들고 for 루프를 만들지 만 주석 처리했습니다.) 맨 위에서이 작업을 시작했습니다. 여기에 모든 내 코드입니다 :

 $(document).ready(function(){ 

     var counter = 0; 
     var cardArray = ['yinyang', 'heart', 'star', 'smiley', 'peace', 'crescent', 'target', 'swirl']; 

     /*for(var i = 0; i < cardArray.length; i++){ 
     }*/ 

     $('.click').click(function() { 
      $(this).toggleClass('flip'); 
      counter++; 
      console.log(counter); 

      // if two cards have been flipped: 
      if (counter == 2) { 

      // the following code checks to see if any matching pairs have been selected: 

       if($("#yinyang-01").hasClass("flip") && $("#yinyang-02").hasClass("flip") && $("#yinyang-02").hasClass("click") && $("#yinyang-01").hasClass("click")){ 
        console.log("you got both yin yangs!"); 
        $("#yinyang-01").removeClass('click'); 
        $("#yinyang-02").removeClass('click'); 

        counter = 0; 
        console.log(counter); 
       } 

       else if($("#heart-01").hasClass("flip") && $("#heart-02").hasClass("flip") && $("#heart-01").hasClass("click") && $("#heart-02").hasClass("click")){ 
        console.log("you got both hearts!"); 
        $("#heart-01").removeClass('click'); 
        $("#heart-02").removeClass('click'); 
        counter = 0; 
        console.log(counter); 
       } 

       else if($("#star-01").hasClass("flip") && $("#star-02").hasClass("flip") && $("#star-01").hasClass("click") && $("#star-02").hasClass("click")){ 
        console.log("you got both stars!"); 
        $("#star-01").removeClass('click'); 
        $("#star-02").removeClass('click'); 
        counter = 0; 
        console.log(counter); 
       } 

       else if($("#smiley-01").hasClass("flip") && $("#smiley-02").hasClass("flip") && $("#smiley-01").hasClass("click") && $("#smiley-02").hasClass("click")){ 
        console.log("you got both smileys!"); 
        $("#smiley-01").removeClass('click'); 
        $("#smiley-02").removeClass('click'); 
        counter = 0; 
        console.log(counter); 
       } 

       else if($("#peace-01").hasClass("flip") && $("#peace-02").hasClass("flip") && $("#peace-01").hasClass("click") && $("#peace-02").hasClass("click")){ 
        console.log("you got both peace signs!"); 
        $("#peace-01").removeClass('click'); 
        $("#peace-02").removeClass('click'); 
        counter = 0; 
        console.log(counter); 
       } 

       else if($("#crescent-01").hasClass("flip") && $("#crescent-02").hasClass("flip") && $("#crescent-01").hasClass("click") && $("#crescent-02").hasClass("click")){ 
        console.log("you got both crescents!"); 
        $("#crescent-01").removeClass('click'); 
        $("#crescent-02").removeClass('click'); 
        counter = 0; 
        console.log(counter); 
       } 

       else if($("#target-01").hasClass("flip") && $("#target-02").hasClass("flip") && $("#target-01").hasClass("click") && $("#target-02").hasClass("click")){ 
        console.log("you got both targets!"); 
        $("#target-01").removeClass('click'); 
        $("#target-02").removeClass('click'); 
        counter = 0; 
        console.log(counter); 
       } 

       else if($("#swirl-01").hasClass("flip") && $("#swirl-02").hasClass("flip") && $("#swirl-01").hasClass("click") && $("#swirl-02").hasClass("click")){ 
        console.log("you got both swirls!"); 
        $("#swirl-01").removeClass('click'); 
        $("#swirl-02").removeClass('click'); 
        counter = 0; 
        console.log(counter); 
       } 

       // if none of the matching pairs have been selected, flip all the cards back: 
       else { 
        console.log("try again!"); 

        if($("#yinyang-02").hasClass("click") && $("#yinyang-01").hasClass("click")){ 
         setTimeout(function() { 
          $("#yinyang-01").removeClass('flip'); 
         }, 600); 
         setTimeout(function() { 
          $("#yinyang-02").removeClass('flip'); 
         }, 600); 
        } 

        if($("#heart-01").hasClass("click") && $("#heart-02").hasClass("click")){ 
         setTimeout(function() { 
          $("#heart-01").removeClass('flip'); 
         }, 600); 
         setTimeout(function() { 
          $("#heart-02").removeClass('flip'); 
         }, 600); 
        } 

        if($("#star-01").hasClass("click") && $("#star-02").hasClass("click")){ 
         setTimeout(function() { 
          $("#star-01").removeClass('flip'); 
         }, 600); 
         setTimeout(function() { 
          $("#star-02").removeClass('flip'); 
         }, 600); 
        } 

        if($("#smiley-01").hasClass("click") && $("#smiley-02").hasClass("click")){ 
         setTimeout(function() { 
          $("#smiley-01").removeClass('flip'); 
         }, 600); 
         setTimeout(function() { 
          $("#smiley-02").removeClass('flip'); 
         }, 600); 
        } 

        if($("#peace-01").hasClass("click") && $("#peace-02").hasClass("click")){ 
         setTimeout(function() { 
          $("#peace-01").removeClass('flip'); 
         }, 600); 
         setTimeout(function() { 
          $("#peace-02").removeClass('flip'); 
         }, 600); 
        } 

        if($("#crescent-01").hasClass("click") && $("#crescent-02").hasClass("click")){ 
         setTimeout(function() { 
          $("#crescent-01").removeClass('flip'); 
         }, 600); 
         setTimeout(function() { 
          $("#crescent-02").removeClass('flip'); 
         }, 600); 
        } 

        if($("#target-01").hasClass("click") && $("#target-02").hasClass("click")){ 
         setTimeout(function() { 
          $("#target-01").removeClass('flip'); 
         }, 600); 
         setTimeout(function() { 
          $("#target-02").removeClass('flip'); 
         }, 600); 
        } 

        if($("#swirl-01").hasClass("click") && $("#swirl-02").hasClass("click")){ 
         setTimeout(function() { 
          $("#swirl-01").removeClass('flip'); 
         }, 600); 
         setTimeout(function() { 
          $("#swirl-02").removeClass('flip'); 
         }, 600); 
        } 

        counter = 0; 
       } 

      } 
     }); 

    }); 

Answer 1

루프의 생각은 ... 바로 당신이 선택을 연결할 수 있기 때문에 그것은 매우 간단합니다.

if (counter == 2) { 
    cardArray.forEach(function (card) { 
     if ($("#" + card + "-01").hasClass("flip") 
      && $("#" + card + "-02").hasClass("flip") 
      && $("#" + card + "-02").hasClass("click") 
      && $("#" + card + "-01").hasClass("click") 
     ) { 
      /* snip */ 
     } 
    }); 
} 

이는 통합의 대부분이 될 것입니다,하지만 당신은 아마 선택기 변경하여 추가로 통합 할 수 있습니다 : "카드"당신이 배열의 각 요소에 지정한 이름

$("[id^='" + card + "'].flip.click").length === 2