divをクリックしたときのクラスの変更は？

Question

divクラス名をクリックすると、どのように変更できますか？例えば：それは、最初のインスタンスのために働いて

<script language="javascript"> 
    function change_autorefreshdiv(){ 
    var NAME = document.getElementById("first_name") 
    NAME.className="second_name" 
    } 
</script> 

次のように

<div class="first_name" onclick="changeClass();" id="first_name"></div> 

私は、ユーザーがdiv要素

<div class="second_name" onclick="changeClass();"></div> 

をクリックしたときに、私のようにJavaScriptを書いて、それを変更したいですのみ。これはページの読み込み時にクリックするとfirst_nameがsecond_nameに変更されます。しかし、もう一度クリックすると、second_nameはfirst_nameに戻りません。

Answer 1

2番目のクラス名を定義する必要があります。現在、クラス名を現在のクラス名とは関係なくハードコードされた値に変更する関数があります。以下も参照してください。MDN: if...else

Answer 2

これはそうするコードがないためです。少しの小切手を追加してください。セミコロンも追加しました。あなたのスクリプトが最初に動作するかどうかは疑問です。

<script language="javascript"> 
function change_autorefreshdiv(){ 
    var NAME = document.getElementById("first_name"); 
    if (NAME.className==="second_name") 
    { 
    NAME.className="first_name"; 
    } 
    else 
    { 
    NAME.className="second_name"; 
    } 
} 
</script> 

Answer 3

これを逆にするには、ifを使用する必要があります。ここでは例です：

function change_autorefreshdiv(){ 
    var NAME = document.getElementById("first_name") 
    var currentClass = NAME.className; 
    if(currentClass == "second_name"){ 
     NAME.className = "first_name"; 
    } else { 
     NAME.className = "second_name"; 
    } 
} 

Answer 4

簡単なJavaScript関数、あなたのapplication.jsに入れて、またはスクリプトタグ： -

function changeClass(){ 
     $("#first_name").attr("class", "class-name-you-want-to-assign"); 
    } 

Answer 5

かなり遅くに（jQueryのは、以下の機能を実行するために含まれるべきです）応答としてマークされた反応を短くすることができます。

function change_autorefreshdiv(){ 
    var NAME = document.getElementById("first_name"); 
    NAME.className = (NAME.className == "second_name") ? "first_name" : "second_name"; 
} 

これはif-else構造の短縮された表記です。 classNameが "second_name"に等しいかどうかをチェックします。 もしそうであれば、変数currentClassは "first_name"になり、そうでない場合（ "first_name"の意味）、 "second_name"になります。

Answer 6

document.getElementById("SidMenu6").className = "start active";