Font awesome 图标未响应 slider 更改而更改

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

不起作用（图标在最左边 position 中未按要求更改），未显示任何错误s

Answer 1

在下面的示例中，根据声音状态提供了三种不同的图标变化。 以前应用于<i>元素的 Class styles 被删除，并分配了新的 class styles。

 /* 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")因为你已经用$('#volume_low')

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