Блог

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

 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]);
});
};
  

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

Вы странным образом настраиваете прослушиватель нажатия кнопок в прослушивателе ввода слайдера…

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

Например:

 //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]);
});