Как изменить отображение класса с использованием JavaScript?

Так что у меня этот код:Как изменить отображение класса с использованием JavaScript?

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"/>

И мне нужен весь класс, чтобы показать/скрыт; У меня около 50 блоков с элементами класса «login», и я хотел бы использовать только JavaScript для его отображения.

источник

2016-12-24 Lèla Null

будет отвечать на jquery? – ab29007

Согласно @AnujaAgarwal, jquery-решение по-прежнему является javascript, хотя оно вводит новую зависимость. Тем не менее, решение представляет собой несколько строк кода и будет стоить принятия библиотеки. –

это не ajax или jquary ... –

Вместо этого я использовал автономную версию jQuery.

источник

2017-07-30 06:16:53

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"/>-->

источник

2016-12-24 09:33:29 ab29007

Я думаю, что так, что PO запрашивает решение jquery, даже не помеченное JQuery – Bharat

ну, я сначала спросил его об этом в комментариях, и он не ответил, поэтому я отправил его в любом случае, если он отвечает да. Я хочу использовать jQuery, тогда это очень короткий ответ, и он может использовать его. – ab29007

, как он сказал ранее, у него есть 50 элементов с этим классом, я думаю, что лучше использовать два цикла 'for'. – ab29007

Изменение display каждого элемента плохая идея. Просто переключите класс всех этих оберток login и установите display в CSS.

источник

2016-12-24 09:34:41 br3t

Вы можете изменить правила CSS после того, как найти его, используя функцию как

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.

я не заметил других людей, делающих такие вещи так, пожалуйста, проверьте это перед использованием. Подход ответа @ br3t намного более обычен.

источник

2016-12-24 10:24:38 traktor53

Предложение, почему бы не использовать JQuery. Это довольно просто и легко, стиль может быть ни одним, ни встроенным/блоком и т. Д.

$ ('. ClassName'). Css ('display', 'style');

источник

2017-04-11 05:39:39

Показать:

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

Hide:

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

источник

2017-04-11 05:43:40 Venryx

Немного поздно, но это получает некоторые виды. Почему нет:

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

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

источник

2017-07-26 08:53:30 DaiLaughing

Как изменить отображение класса с использованием JavaScript?

ответ

Смежные вопросы