Funktion, wenn mehrere Elemente angeklickt wurden

Question

Ich möchte eine Animation nur dann haben, wenn sieben Elemente geklickt wurden. Hier ist der Code, aber es funktioniert nicht:

var animp5 = function() { 
    var i = 0; 
    $("#ans1_p5").on('click', function() { 
     i = i + 1; 
     $("#ans1_p5").fadeOut(800); 
     $("#correct1_p5").fadeIn(1000); 
    }); 

    $("#ans2_p5").on('click', function() { 
     i = i + 1; 
     $("#ans2_p5").fadeOut(800); 
     $("#correct2_p5").fadeIn(1000); 
    }); 

    $("#ans3_p5").on('click', function() { 
     i = i + 1; 
     $("#ans3_p5").fadeOut(800); 
     $("#correct3_p5").fadeIn(1000); 
    }); 

    $("#ans5_p5").on('click', function() { 
     i = i + 1; 
     $("#ans5_p5").fadeOut(800); 
     $("#correct4_p5").fadeIn(1000); 
    }); 

    $("#ans7_p5").on('click', function() { 
     i = i + 1; 
     $("#ans7_p5").fadeOut(800); 
     $("#correct5_p5").fadeIn(1000); 
    }); 

    $("#ans9_p5").on('click', function() { 
     i = i + 1; 
     $("#ans9_p5").fadeOut(800); 
     $("#correct6_p5").fadeIn(1000); 
    }); 

    $("#ans10_p5").on('click', function() { 
     i = i + 1; 
     $("#ans10_p5").fadeOut(800); 
     $("#correct7_p5").fadeIn(1000); 
    }); 

    if (i === 7) { 
     $("#ans4").fadeOut(800); 
     $("#ans6").fadeOut(800); 
     $("#ans8").fadeOut(800); 
     $("#wrong1_p5").fadeIn(1000); 
     $("#wrong2_p5").fadeIn(1000); 
     $("#wrong3_p5").fadeIn(1000); 
     $("#cor_p5").fadeIn(1000); 
    } 
}; 

Ich habe versucht, andere Lösungen (wie .data('clicked') oder aber sie funktionierte nicht

Answer 1

Sie können Beobachter-Entwurfsmuster in Javascript verwenden zu erreichen. dies ist der richtige Weg.

Erste-Handler erstellen, abonnieren und Funktionen ausführen, und dann können Sie abonnieren waht immer Sie in Ihrem Fall der Vergleich mag ich === 7. fade.execute nach jedem ausführen klicken, um zu validieren.

Es ist auch ratsam, in Ihrem Fall Klassenselektoren als ID-Selektoren zu verwenden. Da ID-Selektoren nicht verwaltet werden können, wird am Ende eine Menge doppelten Code angezeigt.

Aber um Ihrer Frage willen ist Beobachter Ihr Weg zu gehen.

jsFiddle

function Fade() { // Create Fade handlers 
    this.handlers = []; // observers 
} 

Fade.prototype = { // define subscribe and execute 
    subscribe: function(fn) { 
    this.handlers.push(fn); 
    }, 
    execute: function(o, thisObj) { 
     var scope = thisObj || window; 
     this.handlers.forEach(function(item) { 
     item.call(scope, o); 
     }); 
    } 
}; 

var fade = new Fade(); 
fade.subscribe(function(){ // pass function you want to subscribe 
    console.log(i); 
    if(i===7){ 
      $("#ans4").fadeOut(800); 
      $("#ans6").fadeOut(800); 
      $("#ans8").fadeOut(800); 
      $("#wrong1_p5").fadeIn(1000); 
      $("#wrong2_p5").fadeIn(1000); 
      $("#wrong3_p5").fadeIn(1000); 
      $("#cor_p5").fadeIn(1000); 
     } 
}); 

var animp5 = (function(){ 
    var i = 0; 
    $("#ans1_p5").on('click',function(){ 
     i=i+1; 
     $("#ans1_p5").fadeOut(800); 
     $("#correct1_p5").fadeIn(1000); 
     fade.execute(); // execute to check if condition met 
    }); 

    $("#ans2_p5").on('click',function(){  
     i=i+1; 
     $("#ans2_p5").fadeOut(800); 
     $("#correct2_p5").fadeIn(1000); 
     fade.execute(); 
    }); 

    $("#ans3_p5").on('click', function(){ 
     i=i+1; 
     $("#ans3_p5").fadeOut(800); 
     $("#correct3_p5").fadeIn(1000); 
     fade.execute(); 
    }); 

    $("#ans5_p5").on('click', function(){ 
     i=i+1; 
     $("#ans5_p5").fadeOut(800); 
     $("#correct4_p5").fadeIn(1000); 
     fade.execute(); 
    }); 

    $("#ans7_p5").on('click', function(){ 
     i=i+1; 
     $("#ans7_p5").fadeOut(800); 
     $("#correct5_p5").fadeIn(1000); 
     fade.execute(); 
    }); 

    $("#ans9_p5").on('click', function(){ 
     i=i+1; 
     $("#ans9_p5").fadeOut(800); 
     $("#correct6_p5").fadeIn(1000); 
     fade.execute(); 
    }); 

    $("#ans10_p5").on('click', function(){ 
     i=i+1; 
     $("#ans10_p5").fadeOut(800); 
     $("#correct7_p5").fadeIn(1000); 
     fade.execute(); 
    }); 

})(); 

Answer 2

Vielen Dank für Ihre Antworten. Da ich nicht viel Erfahrung mit jQuery habe, konnte ich Ihre Lösung nicht programmieren, aber ich fand eine neue, die perfekt funktioniert. Ich gebe das "if" in jede Klick-Funktion ein, so dass jedes Mal, wenn ich klicke, der Code prüft, ob die Bedingung erfüllt ist und wenn dies passiert, den entsprechenden Code ausführen. Danke wieder