如果aria-valuenow = 0，则将类添加到按钮 [英] Add a class to a button if aria-valuenow = 0

问题描述

如果输入的aria-valuenow为0，我试图找到一种向按钮添加类testing的方法.

I'm trying to find a way to add a class testing to a button if the input has a aria-valuenow is 0.

到目前为止，我的代码:

My code so far:

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="plyr__control js-volume" data-plyr="mute"></button>
  <div class="plyr__volume">
  <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="0" id="plyr-volume-2587" style="--value:0%; 
  width: 0px; left: 200px;" aria-valuetext="0.0%" class="plyr__tab-focus">
</div>

推荐答案

IIFE(立即调用函数表达式)

这是一种设计模式，也称为自执行匿名功能，包含两个主要部分.第一个是Grouping Operator ()内包含词法范围的匿名函数.这样可以防止在IIFE习语中访问变量以及污染全局范围.

It is a design pattern which is also known as a Self-Executing Anonymous Function and contains two major parts. The first is the anonymous function with lexical scope enclosed within the Grouping Operator (). This prevents accessing variables within the IIFE idiom as well as polluting the global scope.

第二部分创建了立即执行的函数表达式()，JavaScript引擎将通过该表达式直接解释该函数.

The second part creates the immediately executing function expression () through which the JavaScript engine will directly interpret the function.

您的代码根本没有执行，请在末尾指定()以使其成为

Your code is not executing at all, specify () at the end to make it an IIFE (Immediately Invoked Function Expression).

演示:

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

.test{
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<button type="button" class="plyr__control js-volume" data-plyr="mute">My Button</button>
<div class="plyr__volume">
  <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="0" aria-valuetext="0.0%" class="plyr__tab-focus">
  
</div>

这篇关于如果aria-valuenow = 0，则将类添加到按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！