无法使用 jQuery 更改图像的不透明度

Question

我正在尝试获取图像以根据布尔标志更改不透明度。它应该在 var pauseDisabled = true 时降低不透明度，并在 pauseDisabled = false 时返回 1 的值。

我创建了下面的 fiddle 来模拟我的尝试。在此示例中，我只是尝试使用 link 来控制 on/off 开关。但是它不会降低不透明度，我不确定我做错了什么。

JS Fiddle: https://jsfiddle.net/w51Lxvjp/8/

<div class="pause">
    <a class="pause-btn">
        <img class="pause-img" src="https://cdn3.iconfinder.com/data/icons/buttons/512/Icon_4-512.png">
    </a>
</div>

<a class="disabler" href="#">Disable Button</a>

$(document).ready(function() {
    var pauseDisabled = false;

    $('.disabler').click(function() {
        pauseDisabled = true;
    })

    if (pauseDisabled === true) {
        $('.pause').css('opacity', '0.2');
    } else if (pauseDisabled === false) {
        $('.pause').css('opacity', '1');
    }
});

Answer 1

您的逻辑有缺陷，因为 if 条件在页面加载时只会运行一次。相反，每次在 click 事件处理程序中切换 pauseDisabled 标志时，您都需要设置不透明度。试试这个：

jQuery($ => {
  let pauseDisabled = false;

  $('.disabler').click(() => {
    pauseDisabled = !pauseDisabled;
    $('.pause').css('opacity', pauseDisabled ? '0.2' : '1');
  })
});

img { width: 250px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="pause">
  <a class="pause-btn">
    <img class="pause-img" src="https://cdn3.iconfinder.com/data/icons/buttons/512/Icon_4-512.png">
  </a>
</div>
<a class="disabler" href="#">Disable Button</a>

Answer 2

无需在此点击事件之外创建此 if else。您可以直接在点击事件中更改不透明度。

        $(document).ready(function() {
  var pauseDisabled = false;

  $('.disabler').click(function() {

     if (pauseDisabled === false) {
    $('.pause').css('opacity', '0.2');
    pauseDisabled = true;
  } else if (pauseDisabled === true) {
    $('.pause').css('opacity', '1');
    pauseDisabled = false;
  }
  })


});

Answer 3

您的 jsFiddle 已更新：

https://jsfiddle.net/w51Lxvjp/15/

基本上，您的 IF 结构仅在单击 link 之前执行一次。

$('.disabler').click(function() {
    pauseDisabled = !pauseDisabled;
    if (pauseDisabled === true) {
    $('.pause-img').css('opacity', '0.2');
  } else {
    $('.pause-img').css('opacity', '1');
  }
})

无法使用 jQuery 更改图像的不透明度

Can't change opacity of image with jQuery

html

javascript

css

jquery

opacity