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

【问题标题】：Can't change opacity of image with jQuery无法使用 jQuery 更改图像的不透明度
【发布时间】：2021-12-23 03:19:05
【问题描述】：

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

我创建了下面的小提琴来模拟我正在尝试的内容。在此示例中，我只是尝试使用链接来控制开/关开关。但是它不会降低不透明度，而且我不确定我做错了什么。

JS 小提琴： 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');
    }
});

【问题讨论】：

你必须把if语句放在click函数中。

标签： javascript jquery html css opacity

【解决方案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>

【讨论】：

【解决方案2】：

您的 jsFiddle 已更新：

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

基本上，您的 IF 结构只执行了一次，在点击链接之前。

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

【讨论】：

【解决方案3】：

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

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


});

【讨论】：