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