Здравствуйте!
Вопрос по Яндекс Мап Апи
Имеется меню с фильтрами иконок. Нужно, чтобы при клике на иконку задний фон у иконки менял цвет, а при повторном клике - цвет становился исходным. Так сказать, положения: иконка выбрана и иконка не выбрана. Находил несколько вариантов, остановился на смене класса при клике, но все это не работает. Не могу понять причины и как это можно сделать...
Собственно, классы
#map {
margin: 0px auto 0px auto;
width: 100%;
height: 600px;
border: 2px solid black;
}
.sidebar {
background-color: #210672;
width: 160px;
height: 100px;
border-radius: 10px;
}
.click {
background-color: #fff;
width: 33%;
height: 50%;
float: left;
cursor: pointer;
}
.show_icon {
background-color: #FFD500;
width: 33%;
height: 50%;
float: left;
cursor: pointer;
}
И попытки реализации
1
var map, objectManager, layerName = "user#layer"; ymaps.ready(onReady);
function onReady () {
setupLayer();
setupSidebar();
spisok ();
setupMap();
setupPresets();
setupPlaces();
}
function setupLayer () {
var Layer = function () {
var layer = new ymaps.Layer("./%z/%x-%y.png", {
//tileTransparent: true,
notFoundTile: "./2/3-0.png"
});
layer.getZoomRange = function () {
return ymaps.vow.resolve([0, 4]);
};
layer.getCopyrights = function () {
return ymaps.vow.resolve("");
};
return layer;
};
ymaps.layer.storage.add(layerName, Layer);
var mapType = new ymaps.MapType(layerName, [layerName]);
ymaps.mapType.storage.add(layerName, mapType);
}
$(document).ready(function(){
$('show_icon').click(function () {
$(this).toggleClass('click');
});
});
function setupSidebar () {
var layoutClass = ymaps.templateLayoutFactory.createClass(
"<div class=sidebar>" +
"<div class=show_icon id=show_Granata></div>"+
"<div class=show_icon id=show_Pistolet></div>" +
"<div class=show_icon id=show_health></div>"+
"<div class=show_icon id=show_Bita></div>"+
"</div>"
и 2 - попытка реализации только на одном элемменте
var map,
objectManager,
layerName = "user#layer";
ymaps.ready(onReady);
function onReady () {
setupLayer();
setupSidebar();
spisok ();
setupMap();
setupPresets();
setupPlaces();
}
function setupLayer () {
var Layer = function () {
var layer = new ymaps.Layer("./%z/%x-%y.png", {
//tileTransparent: true,
notFoundTile: "./2/3-0.png"
});
layer.getZoomRange = function () {
return ymaps.vow.resolve([0, 4]);
};
layer.getCopyrights = function () {
return ymaps.vow.resolve("");
};
return layer;
};
ymaps.layer.storage.add(layerName, Layer);
var mapType = new ymaps.MapType(layerName, [layerName]);
ymaps.mapType.storage.add(layerName, mapType);
}
function setupSidebar () {
var layoutClass = ymaps.templateLayoutFactory.createClass(
"<div class=sidebar>"
"<div class=show_icon id=show_Granata onclick=this.className =
"+
"(this.className == 'show_icon' ? 'click' : 'show_icon')>
</div>"+
"<div class=show_icon id=show_Pistolet></div>" +
"<div class=show_icon id=show_health></div>"+
"<div class=show_icon id=show_Bita></div>"+
"</div>"
Естественно дальше идет код и все кнопки реализованы в function setupMap ()
Сами кнопки работают, но вот как их выделить?... Долго уже мучаюсь, были еще варианты, но эти чисто для наглядности..
jquery Тоже подключен, если это важно
Спасибо!