javascript - 无法使用jQuery更改图片的不透明度

我试图让一个图像改变不透明度的基础上布尔标志。它应该在var pauseDisabled = true时降低不透明度，在1时返回pauseDisabled = false值。
我创建了下面的小提琴来模拟我正在尝试的东西。在这个例子中，我只是试图使用一个链接来控制开/关开关。但它不会降低透明度，我不知道我做错了什么。
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条件在加载页面时只运行一次。相反，每次在pauseDisabled事件处理程序中切换click标志时，都需要设置不透明度。试试这个：

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

    $('.disabler').click(function() {
        pauseDisabled = !pauseDisabled; // or = true if you don't want to toggle
        $('.pause').css('opacity', pauseDisabled ? '0.2' : '1');
    });
});

Updated fiddle

关于javascript - 无法使用jQuery更改图片的不透明度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37308894/