Создать кликабельную сетку jQuery / Javascript

Question

Создать кликабельную сетку jQuery / Javascript

0

Моя цель - создать интерактивную сетку в jQuery/javascript, которая при щелчке ячейки вернет значение индекса ячейки, а затем не позволит больше щелкнуть после первого щелчка (я работаю над настольной игрой так, чтобы щелчок на доске было бы движение, и как только вы переехали, вы не сможете двигаться до следующего поворота). Тем не менее, в настоящее время у меня возникают проблемы, просто чтобы мое событие click работало правильно.

Пока я просто хочу сделать это, когда я нажимаю на свою сетку, он меняет цвет ячейки на красный.

Я посмотрел на создание сетки с возможностью кликов в веб-браузере, но у меня очень мало опыта работы с js, поэтому я был довольно смущен тем, как работают функции обратного вызова. Поэтому я пытался использовать часть этого примера и jQuery, которые, по крайней мере, мне кажутся гораздо более понятными, когда речь заходит о привязке событий к вещам.

EDIT: Забыл сказать, в чем была моя проблема, но тот факт, что когда я запускаю весь следующий код и нажимаю на сетку, ничего не происходит.

grid.js:

$(document).ready(function()
    {
        grid();
    });

$("#grid td").click(function()
    {
        alert("Clicked!");
        $("#grid td").addClass("clicked");
    });

function grid()
{
    var grid = document.getElementById("grid");

    for(var r = 0; r<18; r++)
    {
        var tr = grid.appendChild(document.createElement('tr'));

        for(var c = 0; c<18; c++)
        {
            var cell = tr.appendChild(document.createElement('td'));
        }
    }
}

grid.css:

.grid { margin:1em auto; border-collapse:collapse }
.grid td {
    cursor:pointer;
    width:30px; height:30px;
    border:1px dotted #ccc;
    text-align:center;
    font-family:sans-serif; font-size:16px
}
.grid td.clicked {
    background-color:red;
}

test.html:

<!doctype html>
<html lang="en">
<head>  
    <meta charset="utf8">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <link href="grid.css" rel="stylesheet">
    <script src="grid.js"></script>
</head>
<body>
        <table class="grid" id="grid">
        </table>
</body>
</html>

user1443362 16 март 2014, в 01:10

Источник

0

Расскажите нам еще немного об этих проблемах.
GolezTrol 15 март 2014, в 23:14

Теги:

javascript

jquery

html

1 ответ

Ещё вопросы

Расскажите нам еще немного об этих проблемах.

richb01 · Accepted Answer · 2014-03-15T21-05-00.000Z

Я бы изменил обработчик событий. Я построил небольшой образец в jsfiddle, который мог бы помочь. Если нет, сообщите нам, с чем вы столкнулись.

http://jsfiddle.net/richbuff/gLF4W/

$("td").bind("click", function(){
   alert( $(this).text() );
   // change style here
   $(this).addClass("clicked"); 
});

Изменение: поставьте обработчик клика внутри обработчика ready() следующим образом:

$(document)ready({
    grid();

$("td").bind("click", function(){
   alert( $(this).text() );
   // change style here
   $(this).addClass("clicked"); 
});

Проблема в том, что таблица (#grid) не существует, когда определяется обработчик. Вы также можете попробовать поставить обработчик после тега таблицы.

Я изменил свой код на то, что у вас там, но он все равно ничего не делает. Я заметил, что единственное различие между вашим примером jsfiddle и моим кодом состоит в том, что я генерирую сетку в grid.js. Это вызовет проблемы?
Пожалуйста, смотрите мои изменения. Это должно решить вашу проблему.