Question

我尝试根据范围滑块的位置添加css类。它的工作进展顺利。因此，如果我转到50，它会添加类 new-background1 ，如果我转到100，则会添加 new-background2 ，但如果转到50或100后我会尝试向后滑动例如，它将不再更改。

<div id="inputslide">
<input type="range" step="50" min="0" max="100" value="0"></div>

jQuery('#inputslide input').on("change", function() {
    var placval = this.value
    if (placval == 0) {
        jQuery( ".main-content" ).addClass( "new-background" );
    } else if (placval == 50) {
        jQuery( ".main-content" ).addClass( "new-background1" );
    } else {
        jQuery( ".main-content" ).addClass( "new-background2" );
    }
});

Answer 1

当滑块到达末尾并向后移动时，颜色不会改变，因为您已在不同位置添加了背景色的类。 addClass（）函数不会删除该类并将其添加回来，以便它可以覆盖其他类的先前规则。

请参阅下面的代码段

＆＃13;

jQuery('#inputslide input').on("change", function() {
  var placval = this.value
  if (placval == 0) {
    jQuery(".main-content").addClass("new-background");
    jQuery(".main-content").removeClass("new-background1 new-background2");
  } 
  else if (placval == 50) {
    jQuery(".main-content").addClass("new-background1");
      jQuery(".main-content").removeClass("new-background new-background2");
  }
 else {
  jQuery(".main-content").addClass("new-background2");
  jQuery(".main-content").removeClass("new-background new-background1");
}
return true
});

＆＃13;

.new-background {
  background: red;
}

.new-background1 {
  background: blue;
}

.new-background2 {
  background: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-content">
<div id="inputslide">
  <input type="range" step="50" min="0" max="100" value="0"></div>
  </div>

＆＃13;

仅限范围滑块更新价值上涨但未下跌

1 个答案: