Question

这是我的密码笔。我正在尝试为html5音频创建音量控制器，并且希望图像根据滑块的位置进行更改。例如，如果卷已满，我需要此图像：

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');
    }

上面您可以看到更新滑块位置时调用的函数，该函数依次调用updateVolImage（）;。根据滑块的值设置特定的参数。

功能如下：

  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闪烁，好像它不断地用相同的图像更新它一样，但是我没有知道怎么回事，因为当我打印网址时，它会发生变化...

Answer 1

我认为这是因为url变量具有“;”最后。我也取消使用“背景”，因为如果我没有手动指定它，jQuery会在前端和后端添加不必要的样式。最后，我使用了“背景图像”。

编辑：决定使用精灵来停止图像加载滞后

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

我选择这样的索引：

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

通过jQuery的背景CSS更新没有发生

1 个答案: