Question

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

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

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

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

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

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分配给div函数中创建的draw。

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 customHTML函数在创建期间为div附加data()。

  div.data('customHTML' , customHTML);

要在事件中访问它：

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

Lmk如果适合你

从HTML访问对象？

1 个答案: