在json對象中查找項目

Question

可以說這個對象

var paises = {
        "isora":  {
             leftX: '275',
             topY: '60',
             name: 'Gran Melia Palacio de Isora'
        },
        "pepe":  {
             leftX: '275',
             topY: '60',
             name: 'Gran Melia  de Don Pepe'
        },
        "australia":  {
             leftX: '565',
             topY: '220',
             name: 'Gran Melia Uluru'
        },
        "otro":  {            //    ejemplo
             leftX: '565',    //    cordenada x 
             topY: '220',     //    cordenada y
             name: 'soy otro' //    nombre a mostrar
        }  /*                 <==>  <span class="otro mPointer">isora</span> */
    }

好了，正如您所看到的，它有一個ID（Isora，Pepe，Australia，Otro），每個ID都有Cordinades（leftX，topY）和另一個要顯示的名稱（名稱）

我正在使用它來對圖片進行地理標記，
我已經完成了將鼠標懸停在項目上的部分，並在地圖上突出顯示了要顯示的名稱和名稱，現在我需要做相反的事情； 如果我將鼠標懸停在地圖上的區域，則需要突出顯示列表中（以及地圖上）的項目

所以可以說我有這只老鼠

x = 270

and     

y = 55   

我如何檢查是否有以下項（id）：x + -30（leftX）和y + -30（topY）？

+ -30是錯誤的余量（顯然，用戶很難用鼠標指向確切的金字塔形）

Answer 1

function find(x, y) {
    for (var key in paises) {
        if (paises.hasOwnProperty(key)) {
            var current = paises[key];

            if (Math.abs(current.leftX - x) < 30 && Math.abs(current.topY - y) < 30) {
                return current;
            }
        }
    }
}

然后，您將其稱為：

var found = find(270, 55);

if (found == undefined) {
    // none found
} else {
    // found = the one found!
}

當然，如果不需要匹配的函數，則可以輕松地將函數更改為返回布爾值。

Answer 2

for (var key in paises) {
    if (paises.hasOwnProperty(key)) {
        var item = paises[key];
        if (item.leftX > x - 30 && item.leftX < x + 30 &&
            item.topY > y - 30 && item.topY < y + 30) {
            // DO STUFF!
        }
    }
}

根據您的描述，您應該將leftX和topY重命名為centerX和centerY 。

但要注意的是，我實際上將創建可單擊的HTML元素，而不是使用對象屬性進行定位-然后使用click事件將這些元素連接起來。 這樣，您將無需計算任何內容，因為您可以通過簡單的CSS屬性更改“可點擊區域”的大小。

Answer 3

首先，您可以定義一個確定點是否在誤差范圍內的函數：

function isInErrorMargin(px, py, vx, vy) { // p = reference point, v = actual point
    return vx >= px - 30
        && vx <= px + 30
        && vy >= py - 30
        && vy <= py + 30;
}

然后，使用$.each進行迭代，檢查每個元素：

var found;

$.each(paises, function() {
    if(isInErrorMargin(this.leftX, this.topY, x, y)) {
        found = this;
        return false; // stop
    }
});

Answer 4

function find(obj,test,args) {
    var ret = {};
    for(var i in obj) {

        if(obj.hasOwnProperty(i) && test.apply(obj[i],args) === true) {
            ret[i] = obj[i];
        }
    }
    return ret;
}

var paises = {
        "isora":  {
             leftX: '275',
             topY: '60',
             name: 'Gran Melia Palacio de Isora'
        },
        "pepe":  {
             leftX: '275',
             topY: '60',
             name: 'Gran Melia  de Don Pepe'
        },
        "australia":  {
             leftX: '565',
             topY: '220',
             name: 'Gran Melia Uluru'
        },
        "otro":  {            //    ejemplo
             leftX: '565',    //    cordenada x 
             topY: '220',     //    cordenada y
             name: 'soy otro' //    nombre a mostrar
        }  /*                 <==>  <span class="otro mPointer">isora</span> */
    }

var found = find(paises,function(x,y){
    if(this.hasOwnProperty("leftX") && this.hasOwnProperty("topY") && Math.abs(this.leftX - x) < 30 && Math.abs(this.topY - y) < 30) {
        return true;
    }
    else {
        return false;
    }
},[565,220]);
console.log(found)

該find算法在obj （第一個參數）對象中搜索任何返回true到測試函數（第二個參數）的對象。 如果需要，還可以將參數傳遞給測試函數。