单击多个元素时的功能

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。

此外，在您的情况下，建议使用 class 选择器而不是 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 的经验，所以我无法编写您的解决方案，但我找到了一个完美的新解决方案。我将 "if" 放在每个点击函数中，因此每次我点击时，代码都会检查条件是否已满足，一旦发生这种情况，就会出现运行相应的代码。再次感谢

单击多个元素时的功能

Function when multiple elements have been clicked

javascript

jquery

function

click

elements