ボタンのクリックイベントを確認して何かをして、ユーザーが他の場所をクリックした場合にそれらを削除します。

Question

ボタン＃1にonclick機能を付けています。この機能によって、他のボタンの不透明度を変更し、 しかし、私はclickイベントで変更されたものを元に戻し、他のボタンを通常どおりにしたい。 私のjavascriptとjqueryコードは以下の通りです。

btnLink.onclick = function(e) { 
    var divToShow = document.getElementById('linkNewDiv'); 
    console.log('clicked'); 
    divToShow.style.display = 'inherit'; 
    $(btnVideo).prop('disabled',true); 
    $(btnVideo).addClass('opacityReducing'); 
    $(btnPicture).addClass('opacityReducing'); 
    $(btnPublish).addClass('opacityReducing'); 
    $(btnPicture).prop('disabled',true); 
    $(btnPublish).prop('disabled',true); 
    $(btnCheck).addClass('opacityReducing'); 

}

私はそれを理解するために管理couldntの。ユーザーが要素の外側をクリックして要素のスタイルを変更し、これらのコードをすべて書き直してプロパティを無効にしている場合、私は一方的な方法を見つけました。より良い解決策はありますか？ありがとう:)

Answer 1

stopPropagation()でこれを達成できます。あなたのコードにいくつかの変更を加えて、読みやすくするために、これをチェックしてください：

$(document).on('click', function(e) { 
    console.log('clicked'); 
    $('#linkNewDiv').css("display", "inherit"); 
    $(btnVideo, btnPicture, btnPublish).removeClass('opacityReducing').prop('disabled', false); 
    $(btnCheck).removeClass('opacityReducing'); 
}); 
$('#bnLink').on('click', function(e) { 
    e.stopPropagation(); 
    console.log('clicked'); 
    $('#linkNewDiv').css("display", "inherit"); 
    $(btnVideo, btnPicture, btnPublish).addClass('opacityReducing').prop('disabled', true); 
    $(btnCheck).addClass('opacityReducing'); 
});