Question

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

这样做，除了我必须点击它两次才能褪色。

第一次单击时，incorrect();成功调用，然后仅在第二次单击时成功调用fade();。我有5个其他函数与函数one（）相同的代码，它们与不同的box / 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”）。点击。为了使代码完全正常工作，我需要有关你定义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的{{1}}元素添加点击事件监听器，

box

And here is the updated and working 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。

中包装你的“one”方法

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

4 个答案:

And here is the updated and working jsFiddle DEMO