проблема с onclick с базовым сценарием «LightsOut»

Question

Я просто развиваю свои навыки и пытаюсь создать приложение js, чтобы использовать тип сценария «Lights Out», который вы, возможно, видели раньше. Ничего сложного. Или так я думал. Идея заключается в том, что вы начинаете с сетки затемненных огней, и если вы нажмете одну кнопку, она переключит состояние нажатой кнопки, а также кнопку NSEW этой кнопки. Как только вы нажмете правильную последовательность, все огни будут гореть. Моя проблема в основном состоит в том, что созданные мной divs не регистрируют событие click.

function lightUp(){ 
$("div.light").click(function(){ 
    var thisDiv = $(this).attr("id"); 
    var topDiv = null; 
    var bottomDiv = null; 
    var leftDiv = null; 
    var rightDiv = null; 
    for (i= 1; 4; i++){ 
     for (j=1; 4; j++){ 
      var testDiv = "r"+i+"c"+j; 
      if (testDiv === thisDiv) { 
       if (i > 1) { 
        topDiv = "r"+(i-1)+"c"+j; 
       } 
       if (i < 4) { 
        bottomDiv = "r"+(i+1)+"c"+j; 
       } 
       if (j > 1) { 
        leftDiv = "r"+i+"c"+(j-1); 
       } 
       if (j < 4) { 
        rightDiv = "r"+i+"c"+(j+1); 
       } 
      } 
     } 
    } 
    $("#"+thisDiv, "#"+topDiv, "#"+bottomDiv, "#"+leftDiv, "#"+rightDiv).toggleClass("on").toggleClass("off"); 

}); 
        } 

не регистрирует клики по divs.

<div id="r2c3" class="light off" onclick="lightUp();"></div> 

Возможно, этот сценарий должен быть намного сложнее, но я его пробовал. Вход оценивается.

http://jsfiddle.net/4bUnt/3/

Answer 1

Хорошо, получил это работает для вас. Проверьте это здесь:

http://jsfiddle.net/4bUnt/6/

Обычно, когда дает ответ, который я хотел бы предложить решение и позволить человеку повторно работать свой код, однако в этом случае их было довольно много синтаксических ошибок и различные проблемы с кода, чтобы попытаться указать их один за другим, шаг за шагом было бы довольно громоздким, и диалог взад и вперед в комментариях был бы слишком большим. Может быть, почему нет других ответов на этот вопрос до сих пор. В любом случае, проверьте это и изучите его, и если вы нашли это и решение и/или полезный ответ, выберите это как ответ или проголосуйте за него. Спасибо. Продолжать. Удачи! :)

$(document).ready(function() { 
$("div.light").click(function(){ 
    var thisDiv = $(this).attr("id"); 
    var topDiv = null; 
    var bottomDiv = null; 
    var leftDiv = null; 
    var rightDiv = null; 
    for (var i= 1; i<5; i++){ 
     for (var j=1; j<5; j++){ 
      var testDiv = "r"+i+"c"+j; 
      if (testDiv === thisDiv) { 
       if (i > 1) { 
        topDiv = "r"+(i-1)+"c"+j; 
       } 
       if (i < 4) { 
        bottomDiv = "r"+(i+1)+"c"+j; 
       } 
       if (j > 1) { 
        leftDiv = "r"+i+"c"+(j-1); 
       } 
       if (j < 4) { 
        rightDiv = "r"+i+"c"+(j+1); 
       } 
      } 
     } 
    } 

    if ($("#"+thisDiv).hasClass("off")) { 
     $("#"+thisDiv).removeClass("off").addClass("on"); 
     $("#"+topDiv).removeClass("off").addClass("on"); 
     $("#"+bottomDiv).removeClass("off").addClass("on"); 
     $("#"+leftDiv).removeClass("off").addClass("on"); 
     $("#"+rightDiv).removeClass("off").addClass("on"); 
    } else { 
     $("#"+thisDiv).removeClass("on").addClass("off"); 
     $("#"+topDiv).removeClass("on").addClass("off"); 
     $("#"+bottomDiv).removeClass("on").addClass("off"); 
     $("#"+leftDiv).removeClass("on").addClass("off"); 
     $("#"+rightDiv).removeClass("on").addClass("off"); 
    } 

}); 

});