0

Здравствуйте!

Вопрос по Яндекс Мап Апи

Имеется меню с фильтрами иконок. Нужно, чтобы при клике на иконку задний фон у иконки менял цвет, а при повторном клике - цвет становился исходным. Так сказать, положения: иконка выбрана и иконка не выбрана. Находил несколько вариантов, остановился на смене класса при клике, но все это не работает. Не могу понять причины и как это можно сделать...

Собственно, классы

#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 Тоже подключен, если это важно

Спасибо!

1 ответ 1

1

Делегирование обработки события для элементов, кoторых нет в DOM-е в момент определения обработчика.

http://api.jquery.com/on/

$(document).on('click', '.show_icon', function () {
    $(this).toggleClass('click');
});

Поменяйте местами .click { ... } и .show_icon { ... } в css.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.