html 按钮复选框 onchange 事件不会在 iOS 14 上触发，当取消选中复选框时

Question

我有一个临时在droneard.de上运行的网站，其中包括一个 CSS 菜单（取自https://codepen.io/omar_anwari_/pen/WdBgBg ）。 此解决方案使用不可见的复选框。 现在我触发一个 JS 函数来更改我的内容包装器的不透明度，通过在我的按钮上使用 onchange 事件使文本更易读。 在 JS 函数中，我将一个变量设置为当前不透明度，并使用它将不透明度设置/动画为 0.6（如果为 1）和 1（如果为 0.6）。 这在所有现代浏览器上都很好用，但是在 Safari 上 iOS 14.8 和 macOS Big Sur 上我遇到了问题，如果我勾选复选框/打开菜单，它会完全失去它的容量，但它没有设置回来不透明度：关闭菜单/取消选中复选框时为 1。 我不认为问题出在 JavaScript 中，Safari 是否有可能没有将取消勾选视为“onchange”事件？

JavaScript：

function menubackground () {
  var opa_city__var_from_home = $('.fadeinobject').css('opacity');
  if (opa_city__var_from_home == '0.6') {
    $(".fadeinobject").animate({"opacity": "1"}, 230);
  }
  else {
    $(".fadeinobject").animate({"opacity": "0.6"}, 230);
  }
}

HTML：

<input type="checkbox" onchange="menubackground()" />

Answer 1

不透明度在内部存储为浮点数，这会引入可能的错误。 所以在比较之前用一个小数位格式化数字。

 function menubackground () { var opa_city__var_from_home = $('.fadeinobject').css('opacity'); if (parseFloat(opa_city__var_from_home).toFixed(1) == '0.6') { $(".fadeinobject").animate({"opacity": "1"}, 230); } else { $(".fadeinobject").animate({"opacity": "0.6"}, 230); } }