javascript - 如果 aria-valuenow = 0，则将类添加到按钮

Question

如果输入的 aria-valuenow 为 0，我正在尝试找到一种方法将类 testing 添加到按钮。

到目前为止我的代码:

(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>

Answer 1

IIFE (Immediately Invoked Function Expression)

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.

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

您的代码根本没有执行，在末尾指定 () 使其成为 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>