Question

我是新手，因此缺乏简洁。我想知道是否有更好的方式来写这个而不重复自己这么多;

＆＃13;

var slider = $('input.slider'),
  percent = Math.ceil((($(slider).val() - $(slider).attr('min') - 20) / ($(slider).attr('max') - $(slider).attr('min'))) * 100),
  sliderCSS = {
    'background': '-webkit-linear-gradient(left, #6f00e4 0%, #0fe0ba ' + percent + '%, rgba(255, 255, 255, 0.1) ' + percent + '%)'
  };

$(slider).each(function() {
  $(this).css(sliderCSS);
}).on("input", function() {
  $(this).css(newSliderCSS);
});

＆＃13;

我已尝试将重复存储在变量中，然后尝试按以下方式调用它们，但这不能按预期工作。

＆＃13;

var slider = $('input.slider'),
  percent = Math.ceil((($(slider).val() - $(slider).attr('min') - 20) / ($(slider).attr('max') - $(slider).attr('min'))) * 100),
  sliderCSS = {
    'background': '-webkit-linear-gradient(left, #6f00e4 0%, #0fe0ba ' + percent + '%, rgba(255, 255, 255, 0.1) ' + percent + '%)'
  };

$(slider).each(function() {
  $(this).css(sliderCSS);
}).on("input", function() {
  $(this).css(newSliderCSS);
});

＆＃13;

我在哪里捣蛋？感谢。

Answer 1

我建议阅读词汇范围。您可以阅读有关范围here的更多信息。

这应该清理一下。

编辑：当我第一次看时，我在你的例子中错过了对“this”的引用。这是一个更新的答案。

var slider = $('input.slider');

function calculatePercent(value, min, max) {
    return Math.ceil(((value - min - 20) / (max - min)) * 100);
}

function buildCss(value, min, max) {
    var percent = calculatePercent(value, min, max);
    return '-webkit-linear-gradient(left, #6f00e4 0%, #0fe0ba ' + percent + '%, rgba(255, 255, 255, 0.1) ' + percent + '%)';
}

$(slider).each(function() {
    $(this).css('background', buildCss(this.value, this.min, this.max));
    $('#mainSendAmount').text(this.value);
}).on("input", function() {
    $(this).css('background', buildCss(this.value, this.min, this.max));
});

Answer 2

以下是我简化的方法：

var slider = $('input.slider');

$(slider).each(function() {
  var percent = Math.ceil(((this.value - this.min - 20) / (this.max - this.min)) * 100);

  $(this).css('background', makeGradient(percent));
  $('#mainSendAmount').text(this.value);

  $(this).on('input', function() {
    $(this).css('background', makeGradient(percent));
  });
});

var makeGradient = function(percent) {
  return '-webkit-linear-gradient(left, #6f00e4 0%, #0fe0ba ' + percent + '%, rgba(255, 255, 255, 0.1) ' + percent + '%)';
};

更好的方式来写这个（jQuery）

2 个答案: