javascript - (JavaScript 和 HTML)单击时更改按钮的不透明度

Question

我正在创建一个按钮，单击该按钮会将不透明度更改为 0.5。如果再次单击，它将恢复正常。我似乎无法弄清楚我做错了什么。

我试过:

$(() => {
  $(document).on("click", ".test", function() {
    document.getElementsByClassName('test').style.opacity = "0.5";
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="test"></button>

Answer 1

我会使用类(class)系统。 JQuery 有一个 toggleClass 函数，我会用它来完成这项工作。

$(document).click(function() {
    $(".test").toggleClass("transparent");
});

和 CSS 将是

<style>
    .test {
        opacity: 1;
    }
    .test.transparent {
        opacity: 0.5;
    }
</style>