Сохранение цвета кнопки после нажатия в балуне яндекс карты

Рейтинг: 0Ответов: 0Опубликовано: 26.02.2023

Проблема заключается в том, что необходимо что бы после нажатия кнопки, в балуне метки сохранялся измененный цвет после того как балун закрыли и открыли снова. Меток много и балун каждой метки заполняется динамически кнопками с уникальными Id и заранее определенными цветами по классу css. Моя идея заключалась в том, что после нажатия на кнопку, цвет сохраняется в localStorage с учетом уникального Id кнопки, и потом в событии при открытии балуна проверяются Id из html кода балуна и сравниваются с их наличием в localStorage и при совпадении им переназначается цвет. Так же я подумал что в строке кода var data = e.get('target').balloon.getData(); мы получаем как раз таки данные с балуна, но непонятно как получить от туда html из balloonContentBody и от туда получить необходимое Id.

Или лучше поменять подход?

Код ниже написан на нескольких языках, но я надеюсь что общий смысл понятен.

@: balloonContentBody:
@:'<table class="table" id="@item.Id">'+
                foreach (var p in item.Persons)
                {   
                    if (p.Target != true)
                    {                       
                        nottarget++;
                        @:'<tr class="tr1"><td class="td1"><b id="spec @p.Id">@p.Speciality</b><br><input class="inputs-red" onclick="setColor(event, this.id)"'+
                        @: `id=p"@p.Id" type="button" value="@p.FIO" data-count="1"></input></td></tr>`+ 
                    }
                    else
                    {                                           
                        target++;                        
                        @:'<tr class="tr1"><td class="td1"><b id="spec @p.Id">@p.Speciality</b><br><input class="inputs-green" onclick="setColor(event, this.id)"'+
                        @: `id="p@p.Id" type="button" value="@p.FIO" data-count="0"></input></td></tr>`+ 
                    }
                                  
                }
                @:'</table>',
                @: balloonContentFooter: '',
                @: hintContent: '@item.OrganisationName - <b class="inputs-green">@target</b>, <b class="inputs-red">@nottarget</b>'
                @:  });
                @: myMap.geoObjects.add(placemark);
                
         myMap.geoObjects.events.add('balloonopen', function (e) {                  
         var data = e.get('target').balloon.getData();
       }

Ответы

Ответов пока нет.