jQueryで画像の不透明度を変更できません

Question

ブール値フラグに基づいて不透明度を変更する画像を取得しようとしています。 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'); 
    } 
}); 

Answer 1

if条件は唯一のページのロード時に一度だけ実行されますようごロジックは欠陥があります。代わりに、clickイベントハンドラ内でpauseDisabledフラグがトグルされるたびに、不透明度を設定する必要があります。

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