jquery - 如何在输入范围内使用小于添加一个类？

Question

我的代码有问题。它应该在输入中的范围小于 30 时添加一个调用的类test。如果输入中的值恰好为 30 ，但使用小于或大于不起作用时，它可以工作。.js-volumethis.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实际上是返回小数，所以在你的例子中输入永远不会超过，30并且将它包装在 aparseInt中会使其返回 0 无论如何。

因此，您可以进行一些转换以返回整数，或者您可以只获取输入中具有“值”的属性之一。

$(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');
});