Невозможно изменить непрозрачность изображения с помощью jQuery

Question

Я пытаюсь получить изображение, чтобы изменить непрозрачность на основе булевского флага. Он должен опустить непрозрачность, когда var pauseDisabled = true и вернуться к значению 1, когда pauseDisabled = false.

Я создал скрипку ниже, чтобы смоделировать то, что я пытаюсь. В этом примере я просто пытаюсь использовать ссылку для управления переключателем включения/выключения. Однако это не уменьшит прозрачность, и я не уверен, что я делаю неправильно.

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 будет выполняться только один раз при загрузке страницы. Вместо этого вам нужно установить непрозрачность каждый раз, когда флаг 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

Нет необходимости создавать это, если еще за пределами этого события нажатия. Вы можете изменить непрозрачность непосредственно внутри события клика.

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