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

【问题标题】：Add a class to a button if aria-valuenow = 0如果 aria-valuenow = 0，则将类添加到按钮
【发布时间】：2019-07-21 11:15:21
【问题描述】：

如果输入的 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>

【问题讨论】：

(function() { 应该是$(function() {
你打算用那个类做什么？

标签： javascript jquery function input

【解决方案1】：

IIFE (Immediately Invoked Function Expression)

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

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

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

【讨论】：

【解决方案2】：

首先，你需要执行这个函数，所以你需要在最后的;之前加上()：

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

这个函数现在可以工作了，当aria-valuenow 为0 时添加test 类。然而，因为（至少在这个例子中）输入总是将aria-valuenow 属性设置为0，而按钮没有@最初是 987654327@ 类，如果该函数在页面加载时只运行一次，那么 else 块似乎完全没有意义。

【讨论】：

【解决方案3】：

您在创建函数时最后缺少()。自执行匿名函数需要()。

(function() {
  'use strict';
  if ($('.plyr__volume input').attr('aria-valuenow') == "0") {
    $('.js-volume').addClass('test');
    console.log($('.js-volume').attr('class'));
  } 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>

【讨论】：