Javascript画像を表示/非表示

Question

IDに基づいて特定の画像が表示されたときに画像を削除（非表示）する方法。これは私がこれまでに得たものである：

function setImageinVisible(id) { 
    var img = document.getElementById(id); 
    img.style.visibility = 'visible'; 
} 

Answer 1

まず、良い練習は、あなたが直接オブジェクトのスタイルを台無しいけない、と言うのではなく、それは（あるためhttps://en.wikipedia.org/wiki/Separation_of_concernsの）クラスだ切り替えます。私のアドバイスは

.is-hidden { 
    display: none; 
} 

のような状態のクラスを作成してからちょうど元のために、jqueryの、純粋なJSまたは何か他のもので、特定の要素にこのクラスを切り替えることです。

document.querySelector('.my-image').classList.add('is-hidden') 
document.querySelector('.my-image').classList.remove('is-hidden') 

UPDATE：

が1つを表示する前に、以前の状態をリセットし（非表示としてすべての画像を設定）する：

// to add.is-hidden from every image (to hide all the images) 
[].map.call(document.querySelectorAll('img'), function(el) { 
    el.classList.add('is-hidden'); 
}); 
// to show choosen image 
document.querySelector('.my-image').removeClass('is-hidden') 

Answer 2

注純粋なJSと

$('.my-image').addClass('is-hidden') // to hide 
$('.my-image').removeClass('is-hidden') // to show 

：toggle-vader-button,("#Vader")、および("#Palpatine")は私が取り組んでいるプロジェクトに基づいています。あなたの写真のIDを

の代わりに

$ (document).ready(function() { 
    $("#toggle-vader-button").on("click", function() { 
     $("#Vader").toggle(); 
     $("#Palpatine").toggle(); 
    }); 
}); 

もう1つはトグルします。また、私はCSSで "none"としてPalpatineのディスプレイを持っているので、Vaderがオフになっている間はスイッチがオンになることに注意してください。どちらも同じスペースを占有します。