JavaScriptを使用してクラスの表示を変更するにはどうすればよいですか？

Question

だから私はこのコードを持っている：

function show_all() 
 
    { 
 
    \t document.getElementByClassName('login').style.display = 'inline'; 
 
    \t document.getElementById('button-hide').style.display = 'inline'; 
 
    \t document.getElementById('button-show').style.display = 'none'; 
 
    }; 
 
    function hide_all() 
 
    { 
 
    \t document.getElementByClassName('login').style.display = 'none'; 
 
    \t document.getElementById('button-hide').style.display = 'none'; 
 
    \t document.getElementById('button-show').style.display = 'inline'; 
 
    };

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
    \t <input type="button" value="Show login Buttons" id="button-show" onclick="show_all();"/> 
 
    \t <input type="button" value="Hide login Buttons" id="button-hide" onclick="hide_all();"/> 
 
    </nav> 
 
     <p class="login">Username:</p> 
 
     <img src="un.png" class="login"/> 
 
     <p class="login">Password:</p> 
 
    <p>Something not ment to be hidden.</p> 
 
     <img src="pass.png" class="login"/>

を私は表示/非表示されるように、クラス全体を必要とします。 "login"クラスの要素を持つブロックが約50あり、JavaScriptを使用して表示したいと考えています。

Answer 1

代わりに、代わりにjQueryのオフラインバージョンを使用しました。

Answer 2

function show_all() 
 
    { 
 
\t $('.login').css('display','block'); 
 
    \t document.getElementById('button-hide').style.display = 'inline'; 
 
    \t document.getElementById('button-show').style.display = 'none'; 
 
    }; 
 
    function hide_all() 
 
    { 
 
    \t $('.login').css('display','none'); 
 
    \t document.getElementById('button-hide').style.display = 'none'; 
 
    \t document.getElementById('button-show').style.display = 'inline'; 
 
    };

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
    \t <input type="button" value="Show login Buttons" id="button-show" onclick="show_all();"/> 
 
    \t <input type="button" value="Hide login Buttons" id="button-hide" onclick="hide_all();"/> 
 
    </nav> 
 
     <p class="login">Username:</p> 
 
     <!--<img src="un.png" class="login"/>--> 
 
     <p class="login">Password:</p> 
 
    <p>Something not meant to be hidden.</p> 
 
     <!--<img src="pass.png" class="login"/>-->

Answer 3

すべての要素のdisplayを変更することは悪い考えです。これらのすべてのクラスをトグルするだけで、CSSにはdisplayというラッパーが設定されます。

Answer 4

あなたは

function findCssRule(selector){ 
    var sheet; 
    var list; 
    var rule; 
    var sheets = document.styleSheets; 

    if(sheets) { 
     for(var i = 0; sheet = sheets[i++];) { 
      list = sheet.cssRules || sheet.rules; // sheet.rules in IE; 
      for(var j = 0; j < list.length; ++j) { 
       rule=list[ j] 
       if(rule.type != 1) // styleRule 
        continue; 
       if(rule.selectorText != selector) 
        continue; 
       return rule; 
      } 
     } 
    } 
    return null; 
} 

のような機能を使用してそれを見つけ、

if(rule = findCssRule(".login")) 
    rule.style.display = 'none'; // or whatever it needs to be. 

のようにそれを適用した後にCSSルールを変更することができ、私はそう確認してくださいこういうことをやって他の人が気づいていませんそれは使用前に。 @ br3tの対応のアプローチはずっと普通です。

Answer 5

JQueryを使用しないでください。それは非常にシンプルで簡単です。スタイルは非/インライン/ブロックなどになります。

$（ '。className'）.css（ 'display'、 'style'）;

Answer 6

表示：

document.querySelectorAll(".login").forEach(a=>a.style.display = "initial"); 

を隠す：

document.querySelectorAll(".login").forEach(a=>a.style.display = "none"); 

Answer 7

少し遅くなりましたが、これは、いくつかのビューを取得します。どうしてですか：

var arrayOfElements=document.getElementsByClassName('login'); 
var lengthOfArray=arrayOfElements.length; 

for (var i=0; i<lengthOfArray;i++){ 
    arrayOfElements[i].style.display='inline'; 
}