10.04.2010, 14:32
|
|
Аспирант
|
|
Регистрация: 10.04.2010
Сообщений: 34
|
|
|
getElementsByClassName
Здравствуйте, помогите пожалуйста разобраться с getElementsByClassName.
Пол дня уже читаю мануалы и в конец запутался, как сделать рефреш перед началом функции? 
Пробывал добавить в функцию 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>
Последний раз редактировалось denisok82, 10.04.2010 в 21:56.
Причина: Обновление вопроса
|
|
10.04.2010, 15:44
|
 |
⊞ Развернуть
|
|
Регистрация: 11.01.2010
Сообщений: 1,810
|
|
|
Сообщение от Gvozd
|
|
такого метода нету
|
Фигасе...
http://www.w3.org/TR/html5/dom.html#...ntsbyclassname
Да, некроссбраузерен и декларирован в черновике спецификации HTML5, но тем не менее реализован более чем год (два?) тому назад в основных прогрессивных браузерах (IE, само собой, туда не входит, Opera 9.5+, FF3+).
Кстати, по той же спецификации видно, что метод принимает один аргумент. А у Вас, denisok82, что передается вторым аргументом, да еще и необъявленной переменной? |
|
10.04.2010, 20:42
|
|
Аспирант
|
|
Регистрация: 10.04.2010
Сообщений: 34
|
|
Вот так вроде работает, как думаете, правильно?
<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>
|
|
10.04.2010, 20:56
|
|
⊞ Развернуть
|
|
Регистрация: 11.01.2010
Сообщений: 1,810
|
|
|
Правильно, но, как отметил Gvozd, некроссбраузерно. Поэтому, если нужна поддержка IE, то придется использовать решение по ссылке выше.
|
|
10.04.2010, 21:02
|
|
Аспирант
|
|
Регистрация: 10.04.2010
Сообщений: 34
|
|
|
По ссылке Гвоздя я посмотрел. Пока тяжела она еще для меня. Слишком там всё запутано. Пока впитываю знания, упражняюсь на ФФ.
|
|
10.04.2010, 21:49
|
|
⊞ Развернуть
|
|
Регистрация: 11.01.2010
Сообщений: 1,810
|
|
Там нет ничего сложного.
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 // возвращаем набор элементов
}
}
|
|
10.04.2010, 22:02
|
|
Аспирант
|
|
Регистрация: 10.04.2010
Сообщений: 34
|
|
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";
}
|
|
10.04.2010, 22:15
|
|
⊞ Развернуть
|
|
Регистрация: 11.01.2010
Сообщений: 1,810
|
|
А с чего бы им выполняться, если после выполнения
location.reload()
начнет ся переход на другую страницу (пусть и с таким же адресом)? |
|
10.04.2010, 22:19
|
|
Аспирант
|
|
Регистрация: 10.04.2010
Сообщений: 34
|
|
У меня не хватает знаний. Укажите направление, куда копать?  |
|
|
|
