Question

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

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')，但它们也无效。

Answer 1

您可以在javascript中使用观察者设计模式来实现这一目标。

首先创建处理程序，订阅和执行函数，然后你可以订阅，在你的情况下你喜欢它的比较i === 7。每次点击确认后执行fade.execute。

在你的情况下，建议使用类选择器而不是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的经验，我无法编写您的解决方案，但我找到了一个完美的新解决方案。我把＆＃34; if＆＃34;在每次单击功能中，每次单击时，代码检查条件是否已满足，一旦发生这种情况，请运行相应的代码。再次感谢

单击多个元素时的功能

2 个答案: