从 HTML 访问对象？

Question

myObject { div: htmlElement, foo1: bar1, foo2: bar2 }

键div是原始键，它包含此对象的HTML。

当我在范围内有htmlElement 时，是否可以访问/获取/设置myObject 和其他值：foo1 和foo2，例如点击它？

myObject 是原型，我不介意制作原型 getter/setter，但我不知道如何使用/通过 HTML 元素访问对象。

---

制作对象：不要介意Google Maps 部分，它只是一个普通对象..

function customHTML(latlng, foo, map) {
    this.latlng = latlng;
    this.foo = foo;
    this.setMap(map);   
}
customHTML.prototype = new google.maps.OverlayView();

customHTML.prototype.draw = function() {
    var self = this;
    var div = this.div;

    //Create div if there's none
    if (!div) {

        div = this.div = document.createElement('div');
        div.className = 'custom-html';

        var panes = this.getPanes();
        panes.overlayImage.appendChild(div);
    }

    //Location on map - not relevant for this question
    var point = this.getProjection().fromLatLngToDivPixel(this.latlng);
    if (point) {
        div.style.left = (point.x - 20) + 'px';
        div.style.top = (point.y - 64) + 'px';
    }
};

//Create new objects
var data = /*parsed JSON*/;
var count = data.lenght;
var myMap = /*Google Map object - not relevant for this question*/;

for(i=0; i<count; i++) {
    new CustomHTML(data[i].latlng, data[i].foo, myMap);
}

代码中的其他地方：

//Clicking element that was made above
jQuery('body').on('click', '.custom-html', function(event) {

      //I need to access customHTML.foo for example, how?
      //PS! I need to access it from outside, I cannot 
      //attach this click event in prototype.draw
}

Answer 1

将new CustomHTML(data.latlng, data.foo, myMap); 赋值给 JS 变量。

 var customEle = new CustomHTML(data.latlng, data.foo, myMap);

你可以访问它

 jQuery('body').on('click', '.custom-html', function(event) {
   alert(customEle.foo);
 }

更新回答关于多个元素的第二个问题。

1) 将 ID 分配给在 draw 函数中创建的 div。

2) 在 JSON 中创建一个结构来保存所有 customHTML 和 id 作为键。

var arrCustomHTML = {};
arrCustomHTML.divId = customHTML;

3) 如何找回。

jQuery('body').on('click', '.custom-html', function(event) {

       var divId = $(this).prop('id');
       var customHTMLForDiv = arrCustomHTML.divId;
       alert(customHTMLForDiv.foo);
 }  

还有另一种方法。在创建该元素后，使用 jquery data() 函数在创建期间为该 div 添加 customHTML。

  div.data('customHTML' , customHTML);

要在事件中访问它：

   jQuery('body').on('click', '.custom-html', function(event) {
       var ele = $(this).data('customHTML');
       alert(ele.foo);
  }  

Lmk 如果它适合你