Не отвечающие кнопки в JavaScript / Leaflet - PullRequest
Новая
       15

Не отвечающие кнопки в JavaScript / Leaflet

0 голосов
/ 12 марта 2019

Я пытаюсь создать слайдер управления последовательностью с помощью кнопок «вперед» и «назад».Кнопки отображаются и слайдер работает, но когда я запускаю следующий код, карта и слайдер не обновляются при нажатии кнопки.

function createSequenceControls(map, attributes){

var sequenceControl = L.Control.extend({
    options: {
        position: 'bottomleft'
    },
    onAdd: function(map) {
        var container = L.DomUtil.create('div', 'sequence-control-container');
        $(container).append('<input class = "range-slider" type = "range">');
        $(container).append('<button class = "skip" id ="reverse">Reverse</button>');
        $(container).append('<button class = "skip" id ="forward">Skip</button>');
        L.DomEvent.disableClickPropagation(container);
        return container;
    }
});

map.addControl(new sequenceControl());

//create range input element (slider)
//$('#panel').append('<input class="range-slider" type="range">');
//set range slider attributes
$('.range-slider').attr({
    max: 55,
    min: 0,
    value: 0,
    step: 1
});

//Update map based on range slider
$('.range-slider').on('input', function(){
    var index = $(this).val();
    //$('.range-slider').val(index);
    $('.skip').click(function(){
        var index = $('.range-slider').val();
        if($(this).attr('id') == 'forward'){
            index++;
            index = index > 55 ? 0 : index;
        } else if ($(this).attr('id') == 'reverse'){
            index--;
            index = index  < 0 ? 55 : index;
        };
    });

    updatePropSymbols(map, attributes[index]);
});
};

Кто-нибудь видит проблему?Есть ли проблема с тем, как я называю кнопки?Спасибо!

1 Ответ

0 голосов
/ 13 марта 2019

Вы странно настраиваете свои кнопки, слушатель щелчка в пределах ваш слушатель ввода ползунка ...

Вам необходимо прикрепить этих слушателей независимо друг от друга и продублировать их эффект.

Например: 

//Update map based on range slider
$('.range-slider').on('input', function(){
  var index = $(this).val();
  updatePropSymbols(map, attributes[index]);
});

// Update map based on buttons
$('.skip').click(function(){
    var index = $('.range-slider').val();
    if($(this).attr('id') == 'forward'){
        index++;
        index = index > 55 ? 0 : index;
    } else if ($(this).attr('id') == 'reverse'){
        index--;
        index = index  < 0 ? 55 : index;
    };
   // Reflect modified value on slider
   $('.range-slider').val(index);
   // Not sure if previous line eould trigger the "input" event
   // If not, then simply duplicate the effect
   updatePropSymbols(map, attributes[index]);
});
...