Проблема div onclick с базовым скриптом «LightsOut»

Question

Проблема div onclick с базовым скриптом «LightsOut»

0

Я просто развиваю свои навыки и пытаюсь создать приложение 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");

});
                     }

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

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

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

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

Elijah 14 дек. 2013, в 08:57

Источник

0

Для начала ... Вы комбинируете javascript и jquery, не включая библиотеку jquery.
Bryan Elliott 14 дек. 2013, в 07:16
0

jsfiddle.net/4bUnt/4 применение инфраструктуры jquery к jsfiddle не имеет никакого эффекта.
Elijah 14 дек. 2013, в 07:21

Теги:

javascript

html

onclick

1 ответ

Ещё вопросы

Для начала ... Вы комбинируете javascript и jquery, не включая библиотеку jquery.
jsfiddle.net/4bUnt/4 применение инфраструктуры jquery к jsfiddle не имеет никакого эффекта.

MElliott · Accepted Answer · 2013-12-14T06-19-00.000Z

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

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");
     }

});

});

Спасибо за помощь. Вы были очень близки к моему замыслу. Я обновил скрипку, если вам интересно, как она должна была выглядеть. jsfiddle.net/4bUnt/7
Великолепный Илия! Это крутая маленькая игра и отличная идея проекта! Я вижу, чтобы это работало лучше, чем предполагалось. Удачи. :)