Question

我正在尝试根据布尔标志获取图像以更改不透明度。它应该在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');
    }
});

Answer 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

Answer 2

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

        $(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结构只执行一次。

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

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

3 个答案: