jquery - 通过 jquery 的后台 css 更新没有发生

Question

这是我的密码笔。我正在尝试为 html5 音频创建一个音量 Controller ，我希望图像根据 slider 的位置进行更改。例如，如果音量已满，我想要这张图片:

https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Speaker_Icon.svg/500px-Speaker_Icon.svg.png

但是当它处于低音量时，我希望图像是这样的: https://i.imgur.com/AHFvfqD.png

我觉得我的代码应该按预期工作，我不知道这是否与 codepen 有关，或者我只是犯了一个很难发现的愚蠢错误。

这是我想出的: https://codepen.io/cryptodescriptor/pen/ErEbzp

我很感激能得到的任何帮助。

代码的快速概览:

  slider.oninput = function() {
    if (this.value >= 66 && !$vol_icon.hasClass('high')) {
      console.log(3);
      updateVolImage(2, 'high');
    } else if (this.value < 66 && this.value >= 33 && !$vol_icon.hasClass('medium')) {
      console.log(2);
      updateVolImage(1, 'medium');
    } else if (this.value < 33 && !$vol_icon.hasClass('low')){
      console.log(1);
      updateVolImage(0, 'low');
    }

上面你可以看到更新 slider 位置时调用的函数，它又调用了updateVolImage();根据 slider 的值使用特定参数。

函数如下:

  function updateVolImage(img_no, className) {
    removeClass();
    $vol_icon.addClass(className);
    prev_class = className;
    var url = makeBackground(vol_images[img_no]);
    $vol_icon.css('background', url);
  }

如您所见，它删除了给它的旧类(如果它已经有一个)并用新类更新它，新类可以是低、中或高。这用于防止垃圾邮件更新背景并使其仅在满足定义的阈值时更新它(< 33 || (>= 33 && < 66) || >= 66)。

makeBackground() 函数应该很容易理解。它只是使用传递给 updateVolImage() 函数的 img_no 从列表中选择一个背景图像并将其制作成 css。

然后 jquery 应该只用这一行更新背景: $vol_icon.css('background', url);但不幸的是，这并没有发生。

我已经尝试调试和打印 url 变量，一切看起来都应该是这样。网址正在更改，格式看起来是正确的。

我想我已经滔滔不绝太久了，所以如果你阅读了所有这些并决定帮助一个穷人，谢谢你们。

我应该提到的另一件事是，当我检查应该更改的元素 div 时，我可以看到背景:css 闪烁，好像它正在用相同的图像一遍又一遍地更新它，但我没有知道这是怎么发生的，因为当我打印 url 时它会改变......

Answer 1

有一些工作，我认为这是因为 url 变量有“;”最后。我也放弃了使用“背景”，因为如果我没有手动指定它，jquery 会在前端和结尾添加不需要的样式。最后我使用了“背景图像”。

编辑: 决定使用 Sprite 来停止图像加载延迟

https://codepen.io/cryptodescriptor/pen/Gzxxdb

我这样选择索引:

  var sprite_indexes = {
    0 : '-10px -10px',
    1 : '-65px -10px',
    2 : '-120px -10px',
    3 : '-175px -10px'
  };