getElementsByClassName
Здравствуйте, помогите пожалуйста разобраться с getElementsByClassName.
Пол дня уже читаю мануалы и в конец запутался, как сделать рефреш перед началом функции? :blink: Пробывал добавить в функцию location.reload(), но работает не так, как надо.
<html>
<head>
<style>
p {margin:0px;}
</style>
<script type="text/javascript">
function find_c1() {
var f1 = document.getElementById('layer').getElementsByClassName('c1')
for (var i=0; i<f1.length; i++)
f1[i].style.visibility = "hidden";
}
function find_c2() {
var f2 = document.getElementById('layer').getElementsByClassName('c2')
for (var i=0; i<f2.length; i++)
f2[i].style.visibility = "hidden";
}
function find_c3() {
var f3 = document.getElementById('layer').getElementsByClassName('c3')
for (var i=0; i<f3.length; i++)
f3[i].style.visibility = "hidden";
}
function find_c4() {
var f4 = document.getElementById('layer').getElementsByClassName('c4')
for (var i=0; i<f4.length; i++)
f4[i].style.visibility = "hidden";
}
</script>
</head>
<body>
<input id="but1" type="button" value="Убрать 1" onclick="find_c1()" />
<input id="but2" type="button" value="Убрать 2" onclick="find_c2()" />
<input id="but3" type="button" value="Убрать 3" onclick="find_c3()" />
<input id="but4" type="button" value="Убрать 4" onclick="find_c4()" />
<div id="layer" style="padding-top: 20px; padding-left: 40px;">
<p class="c1">100</p>
<p class="c2">110</p>
<p class="c3">120</p>
<p class="c4">130</p>
<p class="c1">140</p>
<p class="c2">150</p>
<p class="c3">160</p>
<p class="c4">170</p>
</div>
</body>
</html>
|
такого метода нету
во всяком случае он некросбраузерен, поэтому для этой цели есть эмуляция http://javascript.ru/unsorted/top-10...lementsbyclass |
Цитата:
http://www.w3.org/TR/html5/dom.html#...ntsbyclassname Да, некроссбраузерен и декларирован в черновике спецификации HTML5, но тем не менее реализован более чем год (два?) тому назад в основных прогрессивных браузерах (IE, само собой, туда не входит, Opera 9.5+, FF3+). Кстати, по той же спецификации видно, что метод принимает один аргумент. А у Вас, denisok82, что передается вторым аргументом, да еще и необъявленной переменной? |
Вот так вроде работает, как думаете, правильно?
<script type="text/javascript">
function find_c1() {
var f1 = document.getElementById('layer').getElementsByClassName('c1')
for (var i=0; i<f1.length; i++)
alert(i);
}
</script>
|
Правильно, но, как отметил Gvozd, некроссбраузерно. Поэтому, если нужна поддержка IE, то придется использовать решение по ссылке выше.
|
По ссылке Гвоздя я посмотрел. Пока тяжела она еще для меня. Слишком там всё запутано. Пока впитываю знания, упражняюсь на ФФ.
|
Там нет ничего сложного.
if(document.getElementsByClassName) { // есть есть родная фукнция, используем ее
getElementsByClass = function(classList, node) {
return (node || document).getElementsByClassName(classList) // вызываем метод getElementsByClassName нужного узла.
// если указан node, то будет произведен поиск в нем, иначе во всем документе
}
} else { // если родной функции нет, то будем обходить DOM
getElementsByClass = function(classList, node) {
var node = node || document, // узел, в котором ищем
list = node.getElementsByTagName('*'), // выбираем все дочерние узлы
length = list.length, // количество дочерних узлов
classArray = classList.split(/\s+/), // разбиваем список классов
classes = classArray.length, // длина списка классов
result = [], i,j
for(i = 0; i < length; i++) { // перебираем все дочерние узлы
for(j = 0; j < classes; j++) { //перебираем все классы
if(list[i].className.search('\\b' + classArray[j] + '\\b') != -1) { // если текущий узел имеет текущий класс
result.push(list[i]) // запоминаем его
break // прекращаем перебор классов
}
}
}
return result // возвращаем набор элементов
}
}
|
B@rmaley.e><e,
Спасибо большое! Обязательно поковыряю этот кроссбраузерный вариант. [hr] А подскажите, я вот в первом посте обновил код и вопрос. Не найду никак нужного метода. Пытался вот так, но этот код не работает как было задумано:
function find_c1() {
window.location.reload(); // вот после этого не выполняются нижеследующие инструкции почему-то
var f1 = document.getElementById('layer').getElementsByClassName('c1')
for (var i=0; i<f1.length; i++)
f1[i].style.visibility = "hidden";
}
|
А с чего бы им выполняться, если после выполнения
location.reload()начнет ся переход на другую страницу (пусть и с таким же адресом)? |
У меня не хватает знаний. Укажите направление, куда копать? :write:
|
В 8 IE можно использовать querySelectorAlll. Функцию нужно переписывать.
|
Так как же сделать обновление перед выбором другой функции?
|
Ваш вопрос на форуме по C++ звучал бы примерно так: "Как перезапустить программу перед выбором другой функции?". Нелепость понятна?
|
Kolyaj,
Не нужно цепляться к неверно сформулированному вопросу. Ведь суть вопроса понятна. |
Нет, не понятна.
|
Kolyaj,
а вы код из первого поста в нотпад скопируйте, сразу будет всё наглядно видно, если хотите помочь, а не позлословить. |
Ладно, в итоге получилось привинтить визибилити, но код очень громоздкий, можно ли его как-нибудь укомпактить?
<script type="text/javascript">
function find_c1() {
var f1 = document.getElementById('layer').getElementsByClassName('c1')
for (var i=0; i<f1.length; i++)
f1[i].style.visibility = "hidden";
var f2 = document.getElementById('layer').getElementsByClassName('c2')
for (var i=0; i<f2.length; i++)
f2[i].style.visibility = "visible";
var f3 = document.getElementById('layer').getElementsByClassName('c3')
for (var i=0; i<f3.length; i++)
f3[i].style.visibility = "visible";
var f4 = document.getElementById('layer').getElementsByClassName('c4')
for (var i=0; i<f4.length; i++)
f4[i].style.visibility = "visible";
}
function find_c2() {
var f1 = document.getElementById('layer').getElementsByClassName('c1')
for (var i=0; i<f1.length; i++)
f1[i].style.visibility = "visible";
var f2 = document.getElementById('layer').getElementsByClassName('c2')
for (var i=0; i<f2.length; i++)
f2[i].style.visibility = "hidden";
var f3 = document.getElementById('layer').getElementsByClassName('c3')
for (var i=0; i<f3.length; i++)
f3[i].style.visibility = "visible";
var f4 = document.getElementById('layer').getElementsByClassName('c4')
for (var i=0; i<f4.length; i++)
f4[i].style.visibility = "visible";
}
function find_c3() {
var f1 = document.getElementById('layer').getElementsByClassName('c1')
for (var i=0; i<f1.length; i++)
f1[i].style.visibility = "visible";
var f2 = document.getElementById('layer').getElementsByClassName('c2')
for (var i=0; i<f2.length; i++)
f2[i].style.visibility = "visible";
var f3 = document.getElementById('layer').getElementsByClassName('c3')
for (var i=0; i<f3.length; i++)
f3[i].style.visibility = "hidden";
var f4 = document.getElementById('layer').getElementsByClassName('c4')
for (var i=0; i<f4.length; i++)
f4[i].style.visibility = "visible";
}
function find_c4() {
var f1 = document.getElementById('layer').getElementsByClassName('c1')
for (var i=0; i<f1.length; i++)
f1[i].style.visibility = "visible";
var f2 = document.getElementById('layer').getElementsByClassName('c2')
for (var i=0; i<f2.length; i++)
f2[i].style.visibility = "visible";
var f3 = document.getElementById('layer').getElementsByClassName('c3')
for (var i=0; i<f3.length; i++)
f3[i].style.visibility = "visible";
var f4 = document.getElementById('layer').getElementsByClassName('c4')
for (var i=0; i<f4.length; i++)
f4[i].style.visibility = "hidden";
}
</script>
|
denisok82,
Ч, ч, ч, чё это?!:blink: этот код не можно, а нужно "укомпактить". |
Gozar,
Ну главное - работает! Подскажите - как ужать код. Попытался вынести в глобальные переменные, почему-то не работает.
<script type="text/javascript">
var f1 = document.getElementById('layer').getElementsByClassName('c1');
var f2 = document.getElementById('layer').getElementsByClassName('c2');
var f3 = document.getElementById('layer').getElementsByClassName('c3');
var f4 = document.getElementById('layer').getElementsByClassName('c4');
function find_c1() {
for (var i=0; i<f1.length; i++)
f1[i].style.visibility = "hidden";
for (var i=0; i<f2.length; i++)
f2[i].style.visibility = "visible";
for (var i=0; i<f3.length; i++)
f3[i].style.visibility = "visible";
for (var i=0; i<f4.length; i++)
f4[i].style.visibility = "visible";
}
</script>
|
denisok82,
Вы когда-нибудь слышали или читали о том, что в функцию могут передаваться аргументы? например:
function find(hidden_id){}
|
Gozar,
нет, еще не слышал. я же только учусь. Точнее слышал, но не пробовал еще использовать. |
<html>
<head>
<script type="text/javascript">
function find(hidden_id) {
var f = document.getElementById('layer').childNodes;
for (var i=0; i<f.length; i++){
if(f[i].className == hidden_id){
f[i].style.visibility = "hidden";
}
else{
f[i].style.visibility = "visible";
}
}
}
</script>
</head>
<body>
<input id="but1" type="button" value="Убрать 1" onclick="find('c1')" />
<input id="but2" type="button" value="Убрать 2" onclick="find('c2')" />
<input id="but3" type="button" value="Убрать 3" onclick="find('c3')" />
<input id="but4" type="button" value="Убрать 4" onclick="find('c4')" />
<div id="layer" style="padding-top: 20px; padding-left: 40px;"><p class="c1">100</p><p class="c2">110</p><p class="c3">120</p><p class="c4">130</p><p class="c1">140</p><p class="c2">150</p><p class="c3">160</p><p class="c4">170</p></div>
</body>
</html>
Мне честно говоря очень лень разбираться, но если я правильно понял что должно делаться, то так это делать намного проще. Этот способ будет работать только если между </p><p class= не будет пробелов или других символов иначе childNodes (f[i]) нужно проверять на <p> |
Gozar,
Да, вы всё правильно поняли. Спасибо большое за помощь! |
Цитата:
Будем искать. |
Цитата:
|
Цитата:
|
Gozar,
B~Vladi, Спасибо :) Буду постигать. |
Подскажите пожалуйста, как сделать, чтобы оба свойства изменялись, а не только одно первое?
for (var i=0; i<f1.length; i++) f1[i].style.fontWeight = "bolder"; f1[i].style.color = "#ff0000"; Получается только вводя цикл со второй переменной. А сразу как-то можно оба свойства изменить? |
Фигурные скобки забыли.
|
спасибо :thanks:
И я всё еще не понял, можно ли создавать такие глобальные переменные или нет?
<script type="text/javascript">
var f1 = document.getElementById('layer').getElementsByClassName('c1');
var f2 = document.getElementById('layer').getElementsByClassName('c2');
var f3 = document.getElementById('layer').getElementsByClassName('c3');
var f4 = document.getElementById('layer').getElementsByClassName('c4');
function find_c1() {
for (var i=0; i<f1.length; i++)
f1[i].style.visibility = "hidden";
for (var i=0; i<f2.length; i++)
f2[i].style.visibility = "visible";
for (var i=0; i<f3.length; i++)
f3[i].style.visibility = "visible";
for (var i=0; i<f4.length; i++)
f4[i].style.visibility = "visible";
}
</script>
|
Цитата:
|
Kolyaj,
Потому что почему-то не работает, если их объявить глобально. Объясните пожалуйста, если не сложно, что не так. |
Потому что на момент объявления переменных этих узлов ещё нет в DOM-дереве.
|
еще один вариант
if ( typeof( document.getElementsByClassName ) != "function" ) document.getElementsByClassName = function( classname, tagname ) { var tags = tagname ? document.getElementsByTagName( tagname ) : ( document.all ? document.all : document.getElementsByTagName( "*" ) ); console.log( classname, tagname, typeof( tags ) ); var e; var r = []; for ( var i = 0; i < tags.length; i++ ) { e = tags[i].className; var s = e.split( ' ' ).some( function( el, ind, ar ) { return (el == classname); } ); if ( typeof( e ) == 'string' && e && s ) r.push( tags[i] ); } return r; }; |
пожалуйста, разъясните начинающему конструкцию result = [], i,j в коде. Это определение пустого массива? А что такое i,j здесь?
|
Цитата:
var result = [], i,jОпределяет переменные внутри текущего scope |
Манипуляция стилями div'ов через JS
Подскажите, пожалуйста, как я могу изменять стили определенных классов, через обращение к другим по JS скрипту?
с участием 2х элементов можно было бы ограничится тривиальным псевдоклассом :hover, но суть такая: Допустим у нас на сайте 3 элемента и, соответственно, 3 класса к ним: <div class="icon"></div> <div class="hint1"></div> <div class="hint2"></div> в стиле .hint2 {display:none;} При наведении на div "icon" к "hint1" должно присваиваться display:none, а у "hint2" это значение обнулять display:inherit например. Другими словами, при наведении на красный кубик в окошке появляется надпись "это красный кубик", а при наведении на зелёный кубик - "это зелёный кубик". т.к. в js я не силён, а знаю только html|css3 (на хорошем уровне) Своими силами пытался найти ответ, наткнулся на getElementsByClassName но толком не могу разобраться как манипулировать стилями.. |
<style>
.icon{
width:50px;
height:50px;
background:red;
}
.hint1{
display:none;
}
.icon:hover ~ .hint1{
display:block;
}
.icon:hover ~ .hint2{
display:none;
}
</style>
<div class="icon"></div>
<div class="hint1">hint1</div>
<div class="hint2">hint2</div>
Так чтоли? |
|
<div class='featured-view'></div> <div class='latest-view'></div> <div class='topten-view'></div> <script type="text/javascript"> function switchDIV() { var Elements1 = document.getElementsByClassName('featured-view').innerHTML; Elements2 = document.getElementsByClassName('topten-view').innerHTML; Elements3 = ''; Elements1 = Elements3; Elements2 = Elements1; Elements3 = Elements2; } </script> Подскажите пожалуйста в чем проблема!!! Нужно поменять местами 1 и 3й элементы |
| Часовой пояс GMT +3, время: 02:13. |