クリックすると画像が拡大され、もう一度クリックすると前のサイズに戻ります

Question

画像をクリックして大きくなり、再度クリックすると小さくなる。私はこの問題を解決するためにif/elseステートメントを使用しようとしていますが、それでもわかりません。

document.addEventListener("DOMContentLoaded", function(event) { 
var thumbnailElement = document.getElementById("smart_thumbnail"); 

if (thumbnailElement.className === "small") { 
    thumbnailElement.addEventListener("click", function() { 
    thumbnailElement.className = ""; 
    }); 
} else { 
    thumbnailElement.addEventListener("click", function() { 
    thumbnailElement.className = "small"; 
    }); 
} 
}); 

そして、画像のためのHTML：：私は単にID「smart_thumbnail」の「小さな」クラスを取り除くしたいと思ってる

<img class="small" id="smart_thumbnail" src="http://4.bp.blogspot.com/-QFiV4z\ 
3gloQ/ULd1wyJb1oI/AAAAAAAAEIg/LE1Kakhve9Y/s1600/Hieroglyphs_Ani-papyrus.jpg"> 

これは私がこれまで持っているJSですそれを大きくし、 "小さい"クラスを元に戻して、それをもう少し小さくするようにしましたが、私はそれを大きくすることしかできません。 2回目にクリックすると、何もしません。私はif/else if文を試しましたが、うまくいきませんでした。私はここで同じ質問を探しましたが、jQueryに関するものしか見つけられませんでした。 JavaScriptだけでこれを解決しようとしています。

大変助かりました。ありがとう！

Answer 1

上記のコードは1回だけ実行されるという問題があります。サイトを読み込んだ後です。だから、唯一の条件は、あなたが望むもの（thumbnailElement.className === "small"）

をfullfilledさの線に沿って何かである：画像をクリックすると

var thumbnailElement = document.getElementById("smart_thumbnail"); 

thumbnailElement.addEventListener("click", function() { 
    if (this.className === "small") 
    this.className = ""; 
    else 
    this.className = "small"; 
}); 

これは、クラスを確認します。

また、あなたはまた、それはおそらく変更することができます前に、なぜあなたは、 `DOMContentLoaded`でクラス名をチェックしているclassList.toggle

Answer 2

DOMContentLoadedイベントは、1回だけ、つまりページがロードされると発生します。代わりに、if文をクリック単位で実行します。例えば

thumbnailElement.addEventListener("click", function() { 
    if (thumbnailElement.className === "small") { 
     thumbnailElement.className = ""; 
    } else { 
    thumbnailElement.className = "small"; 
    } 
}); 

今一度クリックイベントを登録しますが、それがクリックされるたびに、それはクラス名のロジックを確認し、適切なクラス名を適用します。