Javascript 单击多个元素时的函数

我希望a只有在单击七个元素时才有动画。下面是代码，但它不起作用：

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

或

.attr（'clicked'）

），但它们都不起作用。

您可以使用javascript中的observer设计模式以正确的方式实现这一点

首先创建处理程序，订阅并执行函数，然后您可以根据自己的情况订阅任何您喜欢的比较i==7。每次单击验证后执行fade.execute

此外，在您的情况下，建议使用类选择器而不是id选择器。因为id选择器将无法管理，并且最终会产生大量重复代码

但为了你的问题，观察员是你的出路

谢谢你的回答。 由于我没有太多使用jquery的经验，我无法为您的解决方案编写代码，但我发现了一个新的解决方案，它工作得非常完美。我将“if”放在每个单击函数中，因此每次单击时，代码都会检查条件是否已满足，一旦满足，请运行相应的代码。

---

再次感谢

不要试图根据id将侦听器放在大量元素上……最好使用基于类名的单个侦听器……如果单击了某个内容，则可以在该元素上切换类“单击”或类似的内容……然后计数

$（“.clicked”）.length

如果共享您的dom，则可能更容易知道发生了什么

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

})();