I want to set the current state to selected when clicking on each link. I can do this by:
<ul class="places">
<li class="selected">
<a href="javascript:void(0)" onclick="myClick(0);">
<span class="date">Saturday November 2, 2013</span>
<span class="
time">10am – 12pm</span>
<span class="location">Western Sydney Parklands</span>
</a>
</li>
<li>
<a href="javascript:void(0)" onclick="myClick(1);">
<span class="date">Saturday November 9, 2013</span>
<span class="
time">10am – 12pm</span>
<span class="location">Bankstown High School</span>
</a>
</li>
<li>
<a href="javascript:void(0)" onclick="myClick(2);">
<span class="date">Tuesday November 12, 2013</span>
<span class="
time">9am – 11am</span>
<span class="location">Greystanes Park</span>
</a>
</li>
</ul>
$(document).ready( function() {
$('.places li a').click( function() {
$('.places li').removeClass('selected');
$(this).parent().addClass('selected');
});
});
But this will double triggering onclick event an each link because the calling function myClick() is called to push data to map. Then I decided to implement these in the myClick() function:
function myClick( id ) {
google.maps.event.trigger(markers[id], 'click');
$('.places li').removeClass('selected');
$(this).parent().addClass('selected');
}
The problem is that I cannot use $(this) to add class to its parent li.
See what I have tried here.
Any help would be very much appreciated. Thanks!
