複数の要素がクリックされたときの機能

Question

7つの要素がクリックされたときにのみアニメーションが必要です。ここでは、コードがあるが、それは動作しません：。

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

私は.data('clicked')またはのように（他のソリューションを試してみましたが、彼らはどちらか動作しませんでした

Answer 1

あなたは達成するためにJavaScriptでオブザーバーデザインパターンを使用することができますこれは正しい方法。

まず、ハンドラを作成購読して実行する関数を、その後、あなたは今まであなたがあなたのケースでは、すべてが検証するためにクリックした後、私は=== 7。fade.executeを実行し、その比較を好きWAHT購読することができます。

また、あなたのケースでは、クラスセレクタをidセレクタよりも使用することをお勧めします。 idセレクターは扱いにくいので、多くの重複したコードに終わるでしょう。

あなたの質問のために、オブザーバーはあなたの道です。あなたの答えのための

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

感謝。 jqueryの使用経験はあまりありませんでしたので、私はあなたのソリューションをコーディングできませんでしたが、完璧に動作する新しいものを発見しました。私は "クリック"機能を各クリック機能の中に入れます。クリックするたびに、条件が満たされたかどうかを確認し、適切なコードを実行します。 ありがとうございました