0

明確にさせてください。

XML を解析し、それに応じて Google マップにマーカーを配置し、そのマーカーに関連する情報を含む、マーカーごとに 1 つの非表示の div を作成する巨大なループがあります。

ループは、情報ウィンドウを開くイベントも各マーカーに配置します。情報ウィンドウには、その特定のマーカーの div を表示する必要があるボタンが含まれています。

しかし、私はこれを行う方法がわかりません。以下にコードの大部分を示します。ループの最初の部分は省略し、新しいボタンごとにクリック イベントを追加しようとしている部分に注目しました。

しかし、私はこれを行う方法がわかりません。完全に理解するには、コード内のコメントを参照してください。

$(xml).find('sample').each(function () {

    var id = $(this).find('id long').text();

    /*there was code here which creates the other variables you see below*/

    var infoPage = '<div style="display:none; position:absolute; top:0px; bottom:0px; width:100%;" id="' + id + 'Info">' + '<p>Number: ' + number + '</p>' + '<p>ID: ' + id + '</p>' + '<p>Rock type: ' + rockType + '</p>' + '<p>Minerals: ' + minerals + '</p>' + '<p>Regions: ' + regions + '</p>' + '<p>Latitude: ' + latitude + '</p>' + '<p>Longitude: ' + longitude + '</p>' + '</div>';

    //there was code here which inserts this div into the page

    //this line creates the button which appears inside the info window
    var contentString = '<a href="" data-role="button" id="' + id + '">' + number + '</a>';

    //this line creates the info window
    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });

    /*Here is where I hit a problem. I now need to construct a line of jQuery which attaches to this particular button a click event. But it needs to do it for every new button in the loop, so that each button's click event is unique and opens its personal div. How do I construct a selector which will change with the loop to accomplish the desired result?*/
    $('#' + id).click(function () {
        $('#' + id + 'Info').show();
    });

    google.maps.event.addListener(marker, 'click', function () {
        infowindow.open(map, marker);
    });

});
4

1 に答える 1

1

まず、すべてのボタンに同じクラスを与えます

var contentString = '<a href="" class="mybutton" data-role="button" id="' + id + '">' + number + '</a>';

次に、イベント ハンドラーをすべてのmybuttons

$(document).on('click', '.mybutton', function() {
    $('#' + $(this).attr('id') + 'Info').show();
});

UPD：@Felix Klingが言ったように-ここで重要なことは、ループの外で一度バインドする必要があるということです

于 2012-05-28T02:15:35.957 に答える