JS定位错误的对象

Question

Here is the fiddle:

https://jsfiddle.net/0a0yo575/10/

I am trying to display one box, in the top-left, at a time depending on what is active. But at the moment the JS is removing the point not the box?

$('.red-point').click(function() {
    $('.infobox').removeClass('hidn').addClass('show');
    $(this).removeClass('show').addClass('hide');
});

Answer 1

In your current code $(this) refers to the marker you have clicked. So when you say $(this).removeClass('show').addClass('hide'); you are hiding the clicked marker.

If you give your .infobox elements a class that matches the id of the clicked marker...

<div class="infobox hide termini">Bar<br>Termini</div>

...you could toggle them like this...

$('.red-point').click(function() {
    $('.infobox').removeClass('show').addClass('hide');
    $('.' + $(this).attr('id')).addClass('show');
});

JSFiddle Example

---

Personally, I would give each marker a data attribute containing the desired infowindow text and use this to populate a single infowindow ...

<div class="infobox hide"></div>

<div class="abs red-point" id="termini" data-description="Bar<br>Termini">
     <a onClick="turnGreen(event)">
        <span class="num">1</span>
    </a>
</div>

$('.red-point').click(function() {
    $('.infobox').removeClass('hide').addClass('show').html($(this).data('description'));
});

JSFiddle Example