Question

因此，我创建了一个谷歌地图页面，其中包含一系列由XML生成的标记。我们的想法是，当您单击标记时，将生成一个div，用于显示与该标记相关的事件信息。这一切都很好但我正在努力的是现在试图将手风琴附加到事件信息上。我到目前为止的代码将在你点击的第一个标记上显示一个手风琴（可以是任何一个，它返回正确的信息，显示div并有一个手风琴），但不会在任何后续标记点击，甚至是相同的一个再次点击。

我确定这一定是一个简单的修复，但我已经尝试了一些变化（手风琴有三次尝试，我已经留下来展示不同的版本）而且我得到的相同结果

以下是将事件作为Google事件监听器绑定到标记的代码..

function bindEvents(marker, id, venueName, website){
google.maps.event.addListener(marker, 'click', function(){

    // TARGET and show eventsFeed on click
    $('#eventsFeed').show(222);
    var eventsList = document.getElementById('eventsList');


    // ADDS styles to the events feed divs when created
    // DECLARED here for the inclusion of the venueName & website as feedhead
    // even when no events are present
    var venueNameDiv = "<div class='venueNameFeed'>";
    var webSiteDiv = "<a target='_blank' class='websiteInFeed' href='http://"+website+"'><span class='fa fa-home'></span></a>";
    var titleInFeed = "<div class='"+id+" eventTitleFeed'>";
    var accordDataWrap = "<h2 class='accordWrap>";
    var eventInFeed = "<div class='eventDescFeed'>";
    var dateInFeed = '<div class="eventDateFeed">';
    var priceInFeed = "<div class='eventPriceFeed'>";
    // CLOSE the divs after each entry
    var divBrk = "</div>";
    var closeAccordDataWrap = "</h2>";
    var feedHead = venueNameDiv + venueName + divBrk;


    // EMPTY array to line up matched events in
    var eventsLine = [];

    // CYCLE through eventsArray
    for (var key in eventsArray){

        var eventLoop = eventsArray[key];

        // MATCH id to venue_id
        var venue_id = eventLoop.venue_id;
        if (venue_id == id){

            // ONLY show events from todays date onward
            var now = new Date();
            var date = new Date(eventLoop.eventDATE);
            // SET hours to 0 to ignore time part (always as 01:00:00 for event date?)
            now.setHours(0,0,0,0);  

            if (date >= now){

                //ADD all matched events to eventsLine array
                eventsLine.push(titleInFeed + eventLoop.eventTitle + divBrk + 
                    accordDataWrap + eventInFeed + eventLoop.event + divBrk + 
                    dateInFeed + formatDate(eventLoop.eventDATE) + divBrk +
                    priceInFeed + "£" + eventLoop.price + divBrk + closeAccordDataWrap);
            }
        }
    }

    // TURNS the array into a string and replaces those damned, infernal commas!!
    var outputString = eventsLine.toString().replace(/>,/g, '>');


    // PUT the compiled array into the eventsFeed div (with venueName as title)
    if (website==""){
        eventsList.innerHTML = feedHead + outputString;
    } else {
        eventsList.innerHTML = feedHead + webSiteDiv + outputString;
    }

    // ADD the accordion

   $(document).on('click', marker, function(){
       $(eventsList).accordion({
           header: "div."+id,
           icons: null
       })
   })

// OR

    $(eventsList).each(function(){
        $(eventsList).accordion({
            header: "div."+id,
            icons: null
        });
    });

// OR

accordion(eventsList, id);

});

}

第三个选项调用一个单独的函数，定义为;

function accordion(placement,id){

$(placement).accordion({
    header: "div."+id,
    icons: null
});

}

正如你可能会说我对这一切都很陌生，所以对任何帮助或建议都会非常感激！：）

Answer 1

您可以替换此代码：

$(eventsList).each(function(){
    $(eventsList).accordion({
        header: "div."+id,
        icons: null
    });
});

使用此代码：

$(eventsList).each(function(){
    $(this).accordion({
        header: "div."+id,
        icons: null
    });
});

然后试试。如果你能Create a fiddle代码，那就更好了。

在谷歌地图上调用Jquery手风琴只运行一次

1 个答案: