Question

我有一张id'ed td元素的桌子（跳棋游戏板）。我想构建一些像这样的

的JQuery代码

获取点击的td元素的ID，如果为空则将其设置为“from”
获取点击的td元素的ID，如果填充“from”，则将其设置为“to”
将“from”和“to”id发布到服务器，董事会对象代表董事会状态

我已经完成了一些教程，但我无法将它们拼凑在一起。

Answer 1

1＆amp; 2您将需要使用jQuery选择器来选择表中的所有td元素。然后，您可以使用click方法将相同的单击处理程序应用于所有。 E.g。

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

'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

我不知道这是不是你想要的，但这是我从你的解释中理解的：

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

你没有说数据何时应该是postet，所以我在其他地方写了，因为我觉得你想发布它然后..

在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');
    }
});

Answer 4

绝对的基础知识相当容易组合在一起，这增加了一些逻辑，必须首先选择“从”并检查儿童演示：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)
        }
    })

将JQuery单击事件与JQuery帖子混合使用

4 个答案: