x和y位置。扫雷风格

Question

当我点击我的left-button时，它应该如下图所示。

但相反，我的代码正在这样做。

我做了一个例子（见下面的小提琴）。如图所示，我目前的问题是：

上面和下面的所有内容（不仅是第一行）也在变化。

在我的小提琴示例中，我正在使用.css('background-color', 'red')来测试它。

Here is my fiddle.

我在这两个帖子中收集了信息。

• jQuery x y document coordinates of DOM object
• jQuery: get elements above a given 'y' position

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

working example

<强>更新

嗯，你可以像这样选择所有这些：

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

});