字体令人敬畏的图标不会因为滑块的改变而改变

Question

我试图更改图标，以响应卷控制(范围)元素，但无法使它工作。

我的html是：

<div class="slidercontainer fs-4" id="slider-container">
    <span style="color:white;">&nbsp;&nbsp;&nbsp;&nbsp;</span>
    <span class="badge rounded-pill bg-warning">Audio Volume</span>  
    <span style="color:white;">&nbsp;&nbsp;&nbsp;&nbsp;</span> 

    <i id="volume_low" class="fa fa-volume-down fa-2x"></i>
    <input type="range" min="0" max="2.5" value="0" step="0.1" class="slider" id="myRange">
    <i id="volume-up" class="fa fa-volume-up fa-2x"></i>

  </div>

...并在浏览器中正确显示。

我的javascript是：

// for slider
const slider = document.querySelector("#myRange");

$("#myRange").on("input change", function() 
{ 
  const sliderValue = slider.value;
  if(sliderValue==0){
    console.log('zero', sliderValue );
    $('#volume_low').find("i").toggleClass("fa fa-volume-off fa-2x fa fa-volume-down fa-2x");
  }else
  {
    console.log('nonzero', sliderValue);
    $('#volume_low').find("i").toggleClass("fa fa-volume-down fa-2x fa fa-volume-off fa-2x");
  }

});

// end of for slider

无法工作(图标没有按要求在最左边的位置更改)，也没有显示任何错误的

Answer 1

在下面的示例中，根据声音状态提供了三个不同的图标更改。删除以前应用于<i>元素的类样式，并分配新的类样式。

​

/* Global Variable; It is initialized using the context of the class implemented in the <i> element. */
let beforeClass = "off";

$("#myRange").on("input change", function() { 
  const sliderValue = $("#myRange").val();
   
  /* previously applied class styles are removed */
  $('#volume_low').removeClass(`fa fa-volume-${beforeClass} fa-2x`);
  
  if(sliderValue == 0)  {
    $('#volume_low').addClass("fa fa-volume-off fa-2x");
    beforeClass = "off";
  }
  else if(sliderValue > 0 && sliderValue <= 1) {
    $('#volume_low').addClass("fa fa-volume-down fa-2x");
    beforeClass = "down";
  }
  else if(sliderValue > 1) {
    $('#volume_low').addClass("fa fa-volume-up fa-2x");
    beforeClass = "up";
  }
  
  console.clear();
  console.log(`Value: ${sliderValue}`);
});

i {
  margin-left: 40px;
  width: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="slidercontainer fs-4" id="slider-container">
    <span style="color:white;">&nbsp;&nbsp;&nbsp;&nbsp;</span>
    <span class="badge rounded-pill bg-warning">Audio Volume</span>  
    <span style="color:white;">&nbsp;&nbsp;&nbsp;&nbsp;</span><br><br>
    <i id="volume_low" class="fa fa-volume-off fa-2x"></i>
    <input type="range" min="0" max="2.5" value="0" step="0.1" class="slider" id="myRange">
    <i id="volume-up" class="fa fa-volume-up fa-2x"></i>
</div>

​

Answer 2

你把目标对准了我。

不需要.find("i")，因为您已经用过了

​

// for slider
const slider = document.querySelector("#myRange");

$("#myRange").on("input change", function() { 
  const sliderValue = slider.value;
  if (sliderValue == 0) {
    console.log('zero', sliderValue );
    $('#volume_low').removeClass('fa-volume-down').addClass("fa-volume-off");
  } else {
    console.log('nonzero', sliderValue);
    $('#volume_low').removeClass('fa-volume-off').addClass("fa-volume-down");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="slidercontainer fs-4" id="slider-container">
    <span style="color:white;">&nbsp;&nbsp;&nbsp;&nbsp;</span>
    <span class="badge rounded-pill bg-warning">Audio Volume</span>  
    <span style="color:white;">&nbsp;&nbsp;&nbsp;&nbsp;</span> 

    <i id="volume_low" class="fa fa-volume-down fa-2x"></i>
    <input type="range" min="0" max="2.5" value="0" step="0.1" class="slider" id="myRange">
    <i id="volume-up" class="fa fa-volume-up fa-2x"></i>

  </div>

​