Смешивание событий кликов JQuery с постом JQuery

Question

У меня есть таблица (игровая доска шашек) с идентифицированными элементами td.Я хочу создать некоторый код JQuery, который выполняет что-то вроде этого

1. Получить идентификатор элемента td, по которому щелкнули, установите его как «from», если он пуст

2. Получите идентификатор элемента td, по которому щелкнули, установите его как «to», если «from» заполнено

3. Отправьте идентификаторы from и to всервер, с объектом платы, представляющим состояние платы

Я сделал несколько уроков, но я не смог собрать их воедино.

Answer 1

Для 1 и 2 вы захотите использовать селектор jQuery, который выбирает все элементы td в таблице. Затем вы можете использовать метод щелчка, чтобы применить один и тот же обработчик щелчков ко всем. Э.Г.

$('#tableId').children('td').click(handler);

'обработчик' должен быть объявленной вами функцией, которая выполняет логику, например

var from;

function handler(){
    if ( from ){
        $.post('url', { from : from, to : this.id });
        from = null;
    } else {
        from = this.id;
    }
}

Answer 2

Это выполнит основную работу

var from, to;
$("#board").on("click", "td", function() { // or, if using earlier than v1.7 jquery $("#board").delegate("td", "click", function()
   if (!from) {
       from = $(this).attr("id");
   } else {
       to = $(this).attr("id");
       $.post("/file.php", { 
           from: from, 
           to: to, 
           state : getBoardState()
       } );
       from = to = null;
   }
});

Вам нужно написать свою getBoardState() функцию, которая может быть чем-то вроде

function getBoardState() {
    var state = {};
    $("#board").find("td").each(function() {
         var $this = $(this);
         state[$this.attr("id")] = $this.hasClass("occupied");
    });
    return state;
}

Также вам нужнобудьте осторожны при отключении / обработке кликов при ожидании возвращения сообщения с сервера

Answer 3

Абсолютные основы довольно легко собрать, это добавляет немного больше логики, которая должна сначала выбирать «из» и проверять детей Демонстрация: http://jsfiddle.net/VW94F/

var $brd = $('#board').click(function(evt) {
    var $cell = $(evt.target).closest('td');

    if ($cell.children().length) {
        $('.from').removeClass('from');
        $cell.addClass('from');
        $brd.data('from', $cell[0].id);
    } else {
        if (!$('.from').length) {
            alert('Select "from" first');
            return;
        }
        $cell.addClass('.to');
        var to=$cell[0].id, from= $brd.data('from');
        $brd.data('to', to);
        $.post(url, {from: from,to: to},function(data) {
                // do something on ajax success   
        $brd.removeData()                     
         });
        alert('From: ' + from + '\n To:' + to)
        }
    })

Answer 4

Я не знаю, если это именно то, что вы хотели, но это то, что я понял из вашего объяснения:

var from = "";
var to = "";

$("td").click(function(){ // fires when you click on a td element. You could also use $(".some_class") for example
    if(from=="") { // if "from" is still empty
        from = $(this).attr('id'); // define as id of this element
    } else if(from!="") { // if "from" is already filled
        to = $(this).attr('id');
        $.post("/file.php", { firstvar: from, secondvar: to } ); // posts variables "from" and "to" as "firstvar" and "secondvar"
        from = ""; // reset the variables
        to = "";
    }
});

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

В file.php вы можете получить данные как $_POST["firstvar"] и $_POST["secondvar"]

Вы также можете использовать $.ajax() вместо $.post

$.ajax({
    type: 'POST',
    url: '/file.php',
    data: { firstvar: from, secondvar: to },
    cache: false,
    success: function(data) {
        // the output of this file was saved in "data"
        // something you want to do on success
    },
    error: function(xhr, ajaxOptions, thrownError){
        alert('there was an error');
    }
});