Javascript 如何在input valuenow中添加基于编程更改的数据的类

我之前问了一个关于如何“”的问题，我得到了一个解决方案，但我假设当输入中的滑块变为零时，它会改变

它只适用于

aria valuenow

中加载的内容。例如，如果加载了

aria valuenow=50

，则代码不起作用，但如果加载了

area valuenow=0

，则代码起作用

那么，如何基于以编程方式更改值的输入向div添加类呢

代码：

输入值更改的工作示例-

---

我认为您不需要额外的属性（aria valuenow），您可以检查输入事件的值，根据该值可以添加/删除类：

演示：

（函数（）{
$（'plyr-volume-2587'）。关于（'input'，function（）{
如果（this.value==“0”）
$（'.js volume'）.addClass（'test'））
其他的
$（'.js volume'）.removeClass（'test'））
});
$（'plyr-volume-2587'）。触发器（'input'）；
})();
.test{
颜色：红色；
}

我的纽扣
我认为您不需要额外的属性（aria valuenow），您可以检查输入事件的值，根据该值可以添加/删除类：

演示：


（函数（）{
$（'plyr-volume-2587'）。关于（'input'，function（）{
如果（this.value==“0”）
$（'.js volume'）.addClass（'test'））
其他的
$（'.js volume'）.removeClass（'test'））
});
$（'plyr-volume-2587'）。触发器（'input'）；
})();
.test{
颜色：红色；
}

我的纽扣
我建议使用，而不是手动添加/删除类。@Mamun这很好，但当我释放单击按钮时，它会改变。无论如何，让它自动转换。我尝试了
$（'plyr-volume-2587'）。关于（'change'），没有work@GregorySchultz，您可以尝试输入事件而不是更改，更新了答案，请检查：）是否有效。再次感谢。我建议使用，而不是手动添加/删除类。@Mamun这很好，但当我释放单击时它会改变。无论如何，让它自动转换。我尝试了
$（'plyr-volume-2587'）。关于（'change'），没有work@GregorySchultz，您可以尝试输入事件而不是更改，更新了答案，请检查：）是否有效。再次感谢。
<div class="plyr__control js-volume" data-plyr="mute">My Button</div>
<input data-plyr="volume" type="range" min="0" max="1" step="0.05" value="1" 
autocomplete="off" role="slider" aria-label="Volume" aria-valuemin="0"
aria-valuemax="100" aria-valuenow="*programmatically changes*" id="plyr-volume-2587" style="--value:0%; 
width: 0px; left: 200px;" aria-valuetext="0.0%" class="plyr__tab-focus">

$(function() {
var val = $('.plyr__volume input').attr('aria-valuenow');
if(val == "0") $('.js-volume').addClass('test');
})();