0

3x3のHTMLテーブルがあり、各要素に個別の<canvas>要素が格納されています。テーブルに次の代わりに
1つ のセルがあります。画像を含むセルがクリックされ、その右側のセルにテキストが含まれている場合、そのセルのキャンバスを交換しようとしています。隣接するセルにテキストが保存されます。 次のコードを使用すると、セルをクリックするたびに、canvas要素が消えてテキストが入れ替わるだけで、右側のセルにテキストが含まれなくなるか、 を使用してキャンバスにアクセスしようとしましたが、機能しません。値の交換のためにこのコンテンツにアクセスしますか？ このために簡略化されたjsFiddleを作成しました：http：//jsfiddle.net/bobbyrne01/dbMnM/1/text<canvas>

<canvas>
("#blankCell").html()


$(function () {

    var $tbl = $('<table border="1">').attr('id', 'grid');
    var $tbody = $('<tbody>').attr('id', 'tableBody');
    var tileCount = 0;
            var rowCount = $("#numOfPieces").val();

    for (var i = 0; i < rowCount; i++) {

        var trow = $("<tr>").attr('id', 'row' + i); // New row

        for (var j = 0; j < rowCount; j++) {

            $cell.append(canvasArray[tileCount]); // Each data cell contains separate canvas element
            $cell.appendTo(trow); 
            tileCount++;
        }

        trow.appendTo($tbody);
    }

    $tbl.append($tbody);
    $('table').remove(); // removes previous table if it existed
    $('body').append($tbl);
});

$('#grid tr:nth-child(2) td:last').prev().text("empty");
$('#grid tr:nth-child(2) td:last').prev().attr('id', 'blankCell');

クリックをリッスンします。

   $('body').on('click', '#grid td', function(e) {

    var $this = $(this);
    if ($(this).closest('td').next("#blankCell").length){

        blank = $(this).closest('td').next("#blankCell");

        if (blank.length) {
            //alert('blank to the right');
            $this.before(blank);
        }
        $(this).attr('id', 'blankCell');
        $(this).closest('td').next("#blankCell").attr('id', 'piece');

    }

助けに感謝します！

スワップにキャンバス要素を使用する代わりに、テキストのみが含まれるようになりました。
目標は、ユーザーが横にあるセルを選択した場合、blankCellそのセルをと交換したいblankCell場合、ユーザーが横にないセルを選択した場合、blankCell何も起こらないようにすることです。
今のところ、左右の検出のみに関心があります。

4

1 に答える 1

1

シンプルにして、コンテンツやコンテンツの文字列や属性ではなく、テーブルセル全体を交換するだけです。

$('#grid').on('click', 'td', function(e) {
    var $this = $(this),
        blank = $this.next("#blankCell");
    if (blank.length) {
        //alert('blank to the right');
        $this.before(blank);
    }
});

OK、位置をチェックするためのより複雑なコードが含まれています：

var empty = $("#empty").get(0);
$('#grid').on('click', 'td', function(e) {
    if (!empty || this == empty) return; // abort, abort!

    var currow = this.parentNode,
        emptyrow = empty.parentNode;
    var cx = this.cellIndex,
        cy = currow.rowIndex,
        ex = empty.cellIndex,
        ey = emptyrow.rowIndex;
    if (cx==ex && Math.abs(cy-ey)==1 || cy==ey && Math.abs(cx-ex)==1) {
        // empty and this are next to each other in the grid
        var afterempty = empty.nextSibling,
            afterthis = this.nextSibling;
        currow.insertBefore(empty, afterthis);
        emptyrow.insertBefore(this, afterempty);
    }
});

jsfiddle.netでのデモ

于 2012-12-21T02:45:50.777 に答える