javascript - 单击两次而不是单击一次后功能起作用

Question

我有一个猜谜游戏，它使用随机数生成器来分配一个“正确”的框。
如果您猜的框不正确，我希望它淡出。

它会这样做，除非我必须单击它两次才能使其消失。

在第一次单击时，incorrect();成功调用，然后仅在第二次单击时fade();成功调用。我有 5 个与函数 one() 具有相同代码的其他函数，它们属于不同的框/div，并且不想通过 jquery 6 次。

有想法该怎么解决这个吗？

编辑：这是一个 jsFiddle，有更多代码可供查看。可能更容易回答：http: //jsfiddle.net/JMqxq/

function correct() {
    document.getElementById("result").innerHTML = "You are correct!";
}

function incorrect() {
    document.getElementById("result").innerHTML = "Sorry, you are incorrect.";
}

function fade() {
    $(document).ready(function () {
        $(temp2).click(function () {
            $(this).animate({
                "opacity": "0.25"
            },
                "slow");
        });
    });
}


function one() {
    temp2 = "#one";

    if (temp == 1) {
        correct();
    } else {
        fade();
        incorrect();
    }
}

Answer 1

var temp2 = "#one";
function correct() {
 document.getElementById("result").innerHTML = "You are correct!";
} 

function incorrect() {
 document.getElementById("result").innerHTML = "Sorry, you are incorrect.";
}

function one() {

   if (temp == 1) {
     correct();
   } 
   else {
     incorrect();
   }
}

$(document).ready(function () {  
     $(temp2).click(function () {
         $(this).animate({
             "opacity": "0.25"
         },
             "slow");
      });
  });

首先，当文档准备好时调用 jQuery 的函数，这意味着它已完全加载。其次，我已经取出了 temp2="#one"，尽管您很容易被替换为 $("#one").click。为了使代码充分发挥作用，我需要有关您在何处定义 temp 的信息。

Answer 2

如果您的页面中包含 jQuery，为什么不使用它，

首先，使用 data 属性来存储一些关于盒子的信息，

<div class="box" id="one" data-id="1">
<div class="box" id="two" data-id="2">
<div class="box" id="three" data-id="3">
...

div您可以直接为具有这样一个类的所有元素添加单击事件侦听器box，

$("div.box").click(function() {
      if (temp == $(this).data("id")) {
          correct();
      } else {
          $(this).animate({"opacity": "0.25"}, "slow");
          incorrect();
      }
  });

这是更新和工作的 jsFiddle DEMO

Answer 3

将您的淡入淡出功能替换为：

function fade(elem) {
    $(elem).click(function () {
        $(this).fadeOut();
    });
}

function one() {
    temp2 = "#one";

    if (temp == 1) {
        correct();
    } else {
        fade(temp2);
        incorrect();
    }
}

Answer 4

我建议尝试删除 $(document).ready 包装器。如果您的 JavaScript 位于 body 元素的末尾，则不需要它。要么将您的“一个”方法包装在 $(document).ready 中。