JavaScript/Flealet中的无反应按钮

Question

我正在尝试创建一个带有"正向"one_answers"反向"按钮的序列控制滑块。显示按钮并且滑块工作起作用，但是当我运行以下代码时，地图和滑块不会在按钮点击上更新。

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

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

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