JS - 如何獲得地圖的正確值？

Question

在加載時我創建一個映射，鍵是anker-element，值是anker的偏移量。 不幸的是我無法正確讀出val，它總是返回最后一個鍵的值。 怎么了？

小提琴

HTML

<a>Anker</a><a>Anker</a><a>Anker</a>

JS

var ankers = {};
$('a').each(function(){

var pos = $(this).offset().left;

ankers[$(this)] = pos;
});

$('a').click( function(e) {
    e.preventDefault();
    alert(ankers[$(this)]);
});

Answer 1

您在地圖中使用的JavaScript對象僅支持字符串鍵（與大多數其他語言中的對象一樣）。

如果你想要一個實際的地圖應該使用一個Map對象，如果你想使用一個對象鍵 - 但那些只能在新的瀏覽器中工作，你可以（ 雖然填充它 ）：

var ankers = new Map();
$('a').each(function(){

    var pos = $(this).offset().left;

    ankers.set($(this), pos);
});

$('a').click( function(e) {
    e.preventDefault();
    alert(ankers.get($(this));
});

小提琴 （基於dfsq的）

或者，您可以使用元素的ID作為鍵並為其提供ID。 或者，您可以完全避免這種情況並將數據保存在對象上而不是地圖中：

$('a').each(function(){
    $(this).data("anker", $(this).offset().left);
});

$('a').click( function(e) {
    e.preventDefault();
    alert($(this).data("anker");
});

小提琴

您應該只將數據屬性用於表示屬性和綁定，但這似乎是合適的，並且就是這里的情況。

Answer 2

javascript中對象的屬性始終是String。 因此，當您嘗試將對象設置為鍵時，此對象將轉換為字符串類型。 結果你只有ankers對象只有一個鍵[object Object] 。

而是考慮給錨定一個id並使用這樣的東西：

var ankers = {};
$('a').each(function () {
    var pos = $(this).offset().left;
    ankers[this.id] = pos;
});

$('a').click(function (e) {
    e.preventDefault();
    $('.val').val(ankers[this.id]);
});

演示： http ： //jsfiddle.net/1c4h17ma/1/