1

我正在为社交网络应用程序开发自定义界面，并且正在使用 infoWindows 来显示有关 pois 的信息。现在我想给用户编辑一些 pois 信息并保存它的可能性。我的问题是，我无法访问 infoWindow 中的特定 DOM 元素。在这里，我使用 pois 解析 XML 文件并将 infoWindows 添加到它们。

function parseXml (xml){
poiXml = xml;
$(poiXml).find("POI").each(function(){

    imgs ="";
    $(this).find("PhotoFile").each(function(){
            imgs += '<tr><td><img src="http://socialdisplay.meinsandkasten.eu/pic/'
                +$(this).attr("name")
                +'?thumb=1"></td></tr>';
    })

    myMarkers.push({
        lat: $(this).find("Latitude").text(), 
        lng: $(this).find("Longitude").text(), 
        data:   '<div id="poiWindow" style="padding:40px">'
                    +'<form id="changeForm">'
                        +'<table>'
                            +'<tr>'
                                +'<th id="poiId" style="display:none">'+$(this).attr("id")+'</th>'
                                +'<th>Titel:<div id="titleChange">'+$(this).attr("title")+'</div></th>'
                            +'</tr>'
                            +'<tr>'
                                +'<td>Geschichte:<div id="storyChange">'+$(this).find("InformationFile").text()+'</div><td>'
                            +'</tr>'
                            +'<tr>'
                                +'<td>Bildbeschreibung:<div id="descriptionChange">'+$(this).find("PhotoDescription").text()+'</div><td>'
                            +'</tr>'
                            +'<tr>'+imgs+'</tr>'    
                            +'<tr>'
                                +'<td><div id="change">Geschichte &auml;ndern</div></td>'
                            +'</tr>'
                        +'</table>'
                    +'</form>'
                +'</div>'           
    })


});

$("#map").gmap3({
        action:'addMarkers',
         markers:myMarkers,
         marker:{
            options:{
                draggable: false
            },
            events:{
                click: function(marker, event, data){
                  var map = $(this).gmap3('get'),
                      infowindow = $(this).gmap3({action:'get', name:'infowindow'});
                  if (infowindow){
                    infowindow.open(map, marker);
                    infowindow.setContent(data);
                  } else {
                    $(this).gmap3({action:'addinfowindow', anchor:marker, options:{content: data}});
                  }
                }
             }
         }      
});
}

并且在初始化地图和文档准备功能之后，我想访问 infoWindow 中的更改 div，这不起作用。我错过了一些基本的东西吗？

$("#change").click(function(){
    if ($(this).text()=="Geschichte &auml;ndern") {
                    $(this).text("Geschichte speichern");
                    $("#poiWindow").get(0).contentEditable = "true";
                    $("#titleChange").get(0).contentEditable = "true";
                    $("#storyChange").get(0).contentEditable = "true";
                    $("#descriptionChange").get(0).contentEditable = "true";
                     // Weitere Befehle, wenn Button aktiv
          } else {
                     $(this).text("Geschichte ändern");
                     // Weitere Befehle, wenn Button inaktiv
          } 
})

谢谢您的帮助。何叔叔

4

1 回答 1

1

好的，我发现，我真的错过了一些非常基本的东西！！！在我加载地图的那一刻，信息窗口中的 DOM 元素不存在。它们是在我的应用程序中动态创建的。所以我无法在 $(document).ready(function(){etc... .

这是修改后的代码：

//add Pois to the map
$("#map").gmap3({
        action:'addMarkers',
         markers:myMarkers,
         marker:{
            options:{
                draggable: false
            },
            events:{
                click: function(marker, event, data){   
                  var map = $(this).gmap3('get'),
                      infowindow = $(this).gmap3({action:'get', name:'infowindow'});
                  var infoWinChange =
                                    "<form id='changeForm'>"+
                                        "<table>"+
                                            "<tr>"+
                                                "<th id='poiId' style='display:none'>"+ data.poiId +"</th>"+
                                                "<th>Titel:</th><th><div id='titleChange'>"+ data.title +"</div></th>"+
                                            "</tr>"+
                                            "<tr>"+
                                                "<td>Geschichte:</td><td><div id='storyChange'>"+ data.story +"</div><td>"+
                                            "</tr>"+
                                            "<tr>"+
                                                "<td>Bildbeschreibung:</td><td><div id='descriptionChange'>"+ data.description +"</div><td>"+
                                            "</tr>"+
                                            "<tr>"+ data.previewImg +"</tr>"+   
                                            "<tr>"+
                                                "<td><div id='buttonChange' onclick='clickChange()'>Geschichte &auml;ndern</div></td>"+
                                            "</tr>"+
                                        "</table>"+
                                    "</form>";    
                  if (infowindow){
                    infowindow.open(map, marker);
                    infowindow.setContent( 
                        infoWinChange              
                    );
                  } else {
                    $(this).gmap3({action:'addinfowindow', anchor:marker, options:{content: 
                        infoWinChange
                                  }});
                  }
                }
             }
         }      
});

和单独的点击功能

function clickChange(){
// alert("Handler for .click() called.");
    if ($("#buttonChange").text()=="Geschichte ändern") {
                    $("#buttonChange").text("Geschichte speichern");
                    $("#changeForm").get(0).contentEditable = "true";
                    $("#titleChange").get(0).contentEditable = "true";
                    $("#storyChange").get(0).contentEditable = "true";
                    $("#descriptionChange").get(0).contentEditable = "true";
                    // Weitere Befehle, wenn Button aktiv
          } else {
                    $("#buttonChange").text("Geschichte ändern");
                    $("#changeForm").get(0).contentEditable = "false";
                    $("#titleChange").get(0).contentEditable = "false";
                    $("#storyChange").get(0).contentEditable = "false";
                    $("#descriptionChange").get(0).contentEditable = "false";
                    // Weitere Befehle, wenn Button inaktiv
          } 
}

我希望对其他人有帮助;-)))

何叔叔

于 2012-03-12T23:08:23.677 回答