Question

我想将这两个函数合而为一，因为当一个函数被调用时，另一个函数不起作用，当然，从人体工程学的角度来看它会更好，因此代码行更少。我希望这能解决无法同时使用它们的问题（这意味着当我滑动滑块1并滑动另一个滑块时，前一个会失去背景颜色）。

%script{:src => "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"}

:javascript
  var slider = document.getElementById("rangeslider");
  var output = document.getElementById("value");
  output.innerHTML = slider.value;

  slider.oninput = function() {
    output.innerHTML = this.value;
    filterSystem();
  }

  function filterSystem() {
    $("em.match.js-match").css({
      'background-color': '#fff',
      'color': '#000'
    }).filter(function() {
      var length = parseInt($(this).attr("data-length"));
      if (slider.value <= length) {
        $(this).css({'background-color': $(this).attr("data-color"), 'color':'#fff'})
      }
    });

  }

  var slider1 = document.getElementById("rangeslider1");
  var output1 = document.getElementById("value1");
  output1.innerHTML = slider1.value;

  slider1.oninput = function() {
    output1.innerHTML = this.value;
    filterSystem1();
  }

  function filterSystem1() {
    $("em.match.js-match").css({
      'background-color': '#fff',
      'color': '#000'
    }).filter(function() {
      var length1 = parseInt($(this).attr("data-group-length"));
      if (slider1.value <= length1) {
        $(this).css({'background-color': $(this).attr("data-color"), 'color':'#fff'})
      }
    });

  }

Answer 1

您可以更改if条件，使其包含or或||语句，

function filterSystem() {
$("em.match.js-match").css({
  'background-color': '#fff',
  'color': '#000'
}).filter(function() {
  var length = parseInt($(this).attr("data-length"));
  var length1 = parseInt($(this).attr("data-group-length"));
  if (slider.value <= length || slider1.value <= length1) {
    $(this).css({'background-color': $(this).attr("data-color"), 'color':'#fff'})
  }
});
}

如果滑块值小于或等于length或length1，则应将背景颜色更改为白色。

我想将两个功能合而为一

1 个答案: