Изменение JQuery для сброса функции

Question

Участник по имени ocanal был достаточно хорош, чтобы помочь мне написать функцию JQuery (вы можете просмотреть jsFiddle здесь: http://jsfiddle.net/JMqxq/5/), но теперь я хочу ее изменить. Я смог успешно изменить его, так что, когда вы правильно угадываете цвет, «уровень» увеличивается на единицу и отображает его правильно. У меня возникают проблемы с тем, что у меня есть «перезагрузка», так что, как только вы догадаетесь о правильном цвете, предыдущие неправильные поля больше не исчезают, а генератор случайных чисел выбрал новый правильный цвет, который вы можете угадать. Любая идея, как я могу это сделать? Вот конкретная функция, которую я хотел бы изменить:

temp = Math.floor((Math.random()*6)+1); 
    $("div.box").click(function() { 
     if (temp == $(this).data("id")) { 
      correct(); 
     } else { 
      $(this).animate({"opacity": "0.25"}, "slow"); 
      incorrect(); 
     } 
    }); 

Кроме того, здесь есть функция, которая вызывается, когда есть правильное предположение, если вам нужно что:

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

Спасибо за любую помощь.

Answer 1

В вашей correct функции вам нужно анимировать каждую коробку обратно непрозрачностью 1, как это:

$(".box").animate({"opacity": "1"}, "slow"); 

Функция затем:

function correct(){ 
    $("#result").html("You are correct!"); 
    level++; 
    $(".box").animate({"opacity": "1"}, "slow"); 
    document.getElementById("level").innerHTML = level; 
} 

Я обновил свой fiddle.

Answer 2

Посмотрите на jsFiddle обновленный jsFiddle.

Я внесла изменения, добавил функцию reset() и вызвал ее после вызова функции function().

window.onload = init; 
var temp = 0; 
var level = 1; 
function init(){ 
    rand(); 
} 

function rand(){ 
    temp = Math.floor((Math.random()*6)+1); 
    $("div.box").click(function() { 
     if (temp == $(this).data("id")) { 
      correct(); 
      reset(); 
     } else { 
      $(this).animate({"opacity": "0.25"}, "slow"); 
      incorrect(); 
     } 
    }); 
} 

function reset(){ 
    $(".box").each(function() { 
     $(this).animate({"opacity": "1.0"}, "slow"); 
    }); 
} 

function correct(){ 
    $("#result").html("You are correct!"); 
    level++; 
    document.getElementById("level").innerHTML = level; 
} 

function incorrect(){ 
    $("#result").html("Sorry, you are incorrect."); 
}