JavaScript/传单中的无响应按钮答案

【问题标题】：Unresponsive Buttons in JavaScript/LeafletJavaScript/传单中的无响应按钮
【发布时间】：2019-03-12 19:52:36
【问题描述】：

我正在尝试创建一个带有“前进”和“后退”按钮的序列控制滑块。按钮显示并且滑块工作，但是当我运行以下代码时，地图和滑块不会在按钮单击时更新。

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

有人知道问题可能是什么吗？我如何调用按钮有问题吗？谢谢！

【问题讨论】：

标签： javascript button leaflet rangeslider

【解决方案1】：

你奇怪地设置了你的按钮点击监听器在你的滑块输入监听器......

您需要独立附加这些侦听器，并复制它们的效果。

例如：

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

【讨论】：