我试图让一个图像改变不透明度的基础上布尔标志。它应该在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/