Question

我有以下代码： -

的jQuery

jQuery('.slider').each(function() {
    var $el = jQuery(this);
    $el.slider({
        range: "max",
        min: $el.data('min'),
        max: $el.data('max'),
        value: $el.data('value'),
        step: $el.data('step'),
        slide: function(event, ui) {
            var percent = (100 / (jQuery(this).data('max') - jQuery(this).data('min'))) * jQuery(this).slider('value');

            jQuery('.slider').not(this).each(function() {
                jQuery(this).slider(
                    'value', 
                    ((jQuery(this).data('max') - jQuery(this).data('min')) / 100) * percent
                );
            });
            jQuery('.slider').each(function() {
                var thisTarget = jQuery(this).data('target');
                var thisValue = jQuery(this).slider('option','value');

                console.log(thisTarget,thisValue);

                jQuery(thisTarget+' span').html(thisValue);
            });

        },
    });
});

HTML

<div class="slider" data-min="3800" data-max="30000" data-value="3848" data-step="500" data-target=".calc-deposit"></div>
<div class="slider" data-min="15400" data-max="120000" data-value="15393" data-step="2000" data-target=".calc-loan"></div>
<div class="slider" data-min="57000" data-max="450000" data-value="57724" data-step="7500" data-target=".calc-mortgage"></div>

<div class="calc-deposit calc-center">£<span></span></div>
<div class="calc-loan calc-center">£<span></span></div>
<div class="calc-mortgage calc-center">£<span></span></div>

以下是JSFIDDLE

这一切都按预期工作，但是当您拖动滑块时，其他滑块似乎要么先行一步，要么落后一步，这取决于您拖动滑块的方式。

为什么会发生这种情况？

Answer 1

只需延迟幻灯片事件的回调，例如：

jQuery('.slider').each(function() {
  var $el = jQuery(this);
  $el.slider({
    range: "max",
    min: $el.data('min'),
    max: $el.data('max'),
    value: $el.data('value'),
    step: $el.data('step'),
    slide: function(event, ui) {
      clearTimeout(this.timeout);
      this.timeout = setTimeout(updateSliders.bind(this, event, ui))
    }
  });
});

function updateSliders(event, ui) {
  var percent = (100 / (jQuery(this).data('max') - jQuery(this).data('min'))) * jQuery(this).slider('value');

  jQuery('.slider').not(this).each(function() {
    jQuery(this).slider(
      'value',
      ((jQuery(this).data('max') - jQuery(this).data('min')) / 100) * percent
    );
  });
  jQuery('.slider').each(function() {
    var thisTarget = jQuery(this).data('target');
    var thisValue = jQuery(this).slider('option', 'value');

    console.log(thisTarget, thisValue);

    jQuery(thisTarget + ' span').html(thisValue);
  });
}

jQuery Sliders同时移动 - 一步不同步

1 个答案:

Updated jsFiddle