JS ориентируетесь неправильный объект

Question

Вот скрипка:

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

Я пытаюсь показать одну коробку, в верхнем левом углу, в то время, в зависимости от того, что является активным. Но на данный момент JS удаляет точку, а не поле?

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

Answer 1

В текущем коде $(this) относится к маркеру вы щелкнули. Поэтому, когда вы говорите $(this).removeClass('show').addClass('hide');, вы скрываете маркер с кликом.

Если вы даете .infobox элементов в class, который соответствует id из щелкнутых маркеров ...

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

... вы можете переключать их, как это ...

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

JSFiddle Example

---

Лично я хотел бы дать каждому маркеру атрибут данных, содержащий нужный infowindow текст и использовать это, чтобы заполнить один 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