jquery - x と y の位置。マインスイーパ スタイル

Question

左ボタンをクリックすると、下の画像のように動作するはずです。

しかし、代わりに、私のコードはこれを行っています。

例を作成しました（以下のフィドルを参照）。画像でわかるように、私の現在の問題は次のとおりです。

上と下のすべて (最初の行だけでなく) も変化しています。

私のフィドルの例では、.css('background-color', 'red')それをテストするために使用しています。

これが私のフィドルです。

この2つの投稿で情報を収集しました。

• DOMオブジェクトのjQuery xyドキュメント座標
• jQuery: 指定された 'y' 位置より上の要素を取得する

Answer 1

ラリーが何を望んでいるのかわからないが、これを試してみてください。

$.expr[':'].xy = function (obj, index, meta, stack) {
    var xy = meta[3].split(',');
    var x = xy[0];
    var y = xy[1];
    var el = $(obj);
    var el_offset = el.offset();
    return el_offset.left == y && (el_offset.top-el.height() == x || el_offset.top+el.height() == x);
}

実例

アップデート：

うーん、次のようにすべてを選択できます。

$.expr[':'].xy = function (obj, index, meta, stack) {
    var xy = meta[3].split(',');
    var y = xy[0];
    var x = xy[1];
    var el = $(obj);
    var el_offset = el.offset();
    // check for top and bottom 3 blocks
    if ((el_offset.top-el.height() == y || el_offset.top+el.height() == y) &&  (el_offset.left+el.width() == x || el_offset.left == x || el_offset.left-el.width() == x))
        return true;
    // left and right
    else if (el_offset.top == y && (el_offset.left+el.width() == x || el_offset.left-el.width() == x))
        return true;

    return false;
}

そして、このようにします：

$(document).ready(function myfunction() {

    $('.content').on("click", function () {
        var obj_left = $(this).offset().left;
        var obj_top = $(this).offset().top;

        $('#wrap').find('.content:xy(' + obj_top + ',' + obj_left + ')').css('background-color', 'red');
    });

});