如何使用小于输入范围的值添加 class？

Question

我的代码有问题。它应该在输入中的范围小于 30 时添加一个名为 test 的 class 到 .js-volume。如果输入中的值恰好在 30 this.value == 30，它可以工作] 但使用小于或大于不起作用。

JS代码：

$(function() {
  $('.plyr-volume input').on('input',function(){
    if(parseInt(this.value > 30)) {
      $('.js-volume').addClass('test');
    } else {
      $('.js-volume').removeClass('test');
    }
  });
  $('.plyr__volume input').trigger('input');
})();

演示 - https://codepen.io/openbayou/pen/JQeEry

Answer 1

this.value 实际上是 returning 小数，所以在你的例子中输入实际上永远不会超过 30，并且将它包装在 parseInt 中它 return 0 无论如何。

所以您可以对 return 整数进行一些转换，或者您可以只获取输入中的一个属性，它具有 "value".

$(function() {
  $('.plyr-volume input').on('input',function(){
    // find the 'aria-valuenow' attribute, returns whole numbers
    var val = $(this).attr('aria-valuenow');   
    if(val > 30) {
      $('.js-volume').addClass('test');
    } else {
      $('.js-volume').removeClass('test');
    }
  });
  $('.plyr__volume input').trigger('input');
});

如何使用小于输入范围的值添加 class？

How to add a class using less than from a range in input?

jquery

if-statement

input

function

plyr.js