Имя пользователя:
Пароль:  
Помощь | Регистрация | Забыли пароль?  | Правила  

Компьютерный форум OSzone.net » Компьютеры + Интернет » Вебмастеру » [решено] Javascript. Скрыть - показать картинки при помощи getElementsByName

Ответить
Настройки темы
[решено] Javascript. Скрыть - показать картинки при помощи getElementsByName

Ветеран


Сообщения: 1862
Благодарности: 132


Конфигурация

Профиль | Сайт | Отправить PM | Цитировать


Привет. Нужна помощь.
Имеем таблицу в которой в одном столбце есть картинки. Нужно по событию, в данном случае чекбокс в ячейке "миниатюра", либо показать, либо скрыть картинки.
Насколько я понял, нужно использовать getElementsByName. Потому как для getElementsById нужны уникальные id, а где я их возьму.
В примере использую тэг а, но думаю суть от использования img не меняется.
Нашел вот такую функцию. Алерты отрабатывают, правда что показывают последующие алерты не пойму.

HTML код: Выделить весь код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> </head> <body> <script> function oo() { var myCollection = document.getElementsByName("srcimage"); alert(myCollection.length); for(i=0;i<myCollection.length;i++) { var myElement = myCollection.item(i); myElement.parentNode.style.dislpay = (myElement.parentNode.style.dislpay == "none" ? "block" : "none"); alert(myElement.parentNode.style.dislpay); } } </script> <style type="text/css"> tr { background-color: #CCFFFF; text-align: center; } .thr { background-color: #CCCCCC; } </style> <table width="100%%" border="0" align="center" bgcolor="#CCCCCC"> <tr class="thr"> <th scope="col"><input name="Name" type="checkbox" value="ON"></th> <th scope="col">Изображение</th> <th scope="col">Миниатюра<input type="checkbox" value="ON" onChange="oo()"></th> <th scope="col">Дата добавления <br /> на сервер</th> <th scope="col">Дата последнего<br /> просмотра</th> <th scope="col">Размер файла</th> </tr> <tr> <td><input name="checkbox[]" type="checkbox" value=""></td> <td><a href=""></a></td> <td><a href="" name="srcimage" style="display:none" >iiiii</a></td> <td></td> <td></td> <td></td> </tr> <tr> <td><input name="checkbox[]" type="checkbox" value=""></td> <td><a href=""></a></td> <td><a href="" name="srcimage" style="display:none" >iiiiii</a></td> <td></td> <td></td> <td></td> </tr> <tr> <td><input name="checkbox[]" type="checkbox" value=""></td> <td><a href=""></a></td> <td><a href="" name="srcimage" style="display:block" >iiiii</a></td> <td></td> <td></td> <td></td> </tr> </table> </body> </html>

-------
ДИЛЕТАНТ - это курьезный человек, который испытывает удовольствие делать то, чего не умеет.
AMD 4200+, MSI Neo2Platinum, 2Gb, ATI 9600, D-Link DWL-G510, FreeBSD 8.0, KDE 4.3.4


Отправлено: 22:19, 21-12-2008

 

Аватара для Coutty

Кот Ти


Сообщения: 7318
Благодарности: 1204

Профиль | Отправить PM | Цитировать


Вот примерно так:
Код: Выделить весь код
function oo() {
   var myCollection = document.getElementsByName("srcimage");
   for(i=0; i<myCollection.length; i++)
      {
      myCollection[i].style.display = (myCollection[i].style.display == 'none' ? 'block' : 'none');
      }
}
Изменение стиля я оставил, но это переключатель того, что есть, а не включатель-выключатель. Можно завести глобальную переменную и в ней хранить состояние, если надо.
Это сообщение посчитали полезным следующие участники:

Отправлено: 09:07, 22-12-2008 | #2



Для отключения данного рекламного блока вам необходимо зарегистрироваться или войти с учетной записью социальной сети.

Если же вы забыли свой пароль на форуме, то воспользуйтесь данной ссылкой для восстановления пароля.


Ветеран


Сообщения: 1862
Благодарности: 132

Профиль | Сайт | Отправить PM | Цитировать


Спасибо, работает.
Даже в Konqueror работает, а в шестом ослике не хочет. Ну и фиг с ним.
Вот только не понял переключателя - выключателя, какая между ними разница?

-------
ДИЛЕТАНТ - это курьезный человек, который испытывает удовольствие делать то, чего не умеет.
AMD 4200+, MSI Neo2Platinum, 2Gb, ATI 9600, D-Link DWL-G510, FreeBSD 8.0, KDE 4.3.4


Отправлено: 21:39, 22-12-2008 | #3


Ветеран


Сообщения: 3806
Благодарности: 824

Профиль | Отправить PM | Цитировать


Да, только это убирает все картинки на странице, а не только миниатюры ;-)
Поэтому о getElementsByName в чистом виде придётся забыть. Классический вариант: передавать функции id таблицы, перебирать у неё всех потомков, сравнивая картинка это или нет. И опять же: все ли картинки внутри таблицы - миниатюры?

Отправлено: 23:56, 22-12-2008 | #4


Аватара для Coutty

Кот Ти


Сообщения: 7318
Благодарности: 1204

Профиль | Отправить PM | Цитировать


Цитата Igor_I:
Даже в Konqueror работает, а в шестом ослике не хочет. »
Да, я забыл проверить в других браузерах... Если руки дойдут - посмотрю. А почему нельзя ID использовать? Ведь страница, как я понимаю, динамически генерируется. Написать везде что-то вроде id="img0", id="img1", ... , id="img12", а потом в скрипте использовать цикл с обращением:
Код: Выделить весь код
n = 12; // количество миниатюр
for (i = 0; i < n; i++)
  {
  document.getElementById('img' + i).style.display = 'none'; // или 'block'
  }
Цитата Igor_I:
Вот только не понял переключателя - выключателя, какая между ними разница? »
Переключатель - переключает состояние. Вот в примере 2 строки выключены и одна включена. Переключатель изменит на 2 строки вкл и 1 выкл. А выключатель будет включать и выключать все миниатюры, независимо от того, были ли включены некоторые из них.

Цитата Busla:
Да, только это убирает все картинки на странице, а не только миниатюры ;-) »
Почему? Это же не getElementsByTagName. Атрибут name='srcimage' прописан не на всех изображениях.
Впрочем, я бы предпочёл getElementById или getElementByClass из Prototype.
Это сообщение посчитали полезным следующие участники:

Отправлено: 03:55, 23-12-2008 | #5


Ветеран


Сообщения: 3806
Благодарности: 824

Профиль | Отправить PM | Цитировать


Coutty, да, каюсь - написал не вникая особо вчитываясь O:-)
Только спецификации html 4.01 предполагает, что name у изображений уникален

Отправлено: 11:40, 23-12-2008 | #6


Ветеран


Сообщения: 1862
Благодарности: 132

Профиль | Сайт | Отправить PM | Цитировать


Coutty, почти уговорил
HTML код: Выделить весь код
<script> function op() { for(i=1; i<<?=$image_on_page?>; i++) { document.getElementById( "img" + i).style.display = document.getElementById( "img" + i).style.display == 'none' ? 'inline' : 'none'; } } </script>

Вот такая функция работает, только приходиться скрипт тоже формировать на лету, чтобы задать количество циклов. Плюс i начинается с 1, а не с 0. А все потому, что инкремент в php сделал в начале цикла.

-------
ДИЛЕТАНТ - это курьезный человек, который испытывает удовольствие делать то, чего не умеет.
AMD 4200+, MSI Neo2Platinum, 2Gb, ATI 9600, D-Link DWL-G510, FreeBSD 8.0, KDE 4.3.4


Отправлено: 23:03, 23-12-2008 | #7


Ветеран


Сообщения: 1862
Благодарности: 132

Профиль | Сайт | Отправить PM | Цитировать


Я бы не сказал, что тема совсем решена. В IE 6 версии так и не работает.

Кстати, Coutty, не подскажешь как вывести список переменных из некоторого массива, по типу var_dump, print_r в php. К примеру, в том же document.getElementsByName. Либо здесь - http://www.spravkaweb.ru/javascript/...ocument/object, приведены объекты, как узнать что в этих объектах содержится.

-------
ДИЛЕТАНТ - это курьезный человек, который испытывает удовольствие делать то, чего не умеет.
AMD 4200+, MSI Neo2Platinum, 2Gb, ATI 9600, D-Link DWL-G510, FreeBSD 8.0, KDE 4.3.4


Отправлено: 20:04, 24-12-2008 | #8


Аватара для Coutty

Кот Ти


Сообщения: 7318
Благодарности: 1204

Профиль | Отправить PM | Цитировать


Цитата Busla:
Только спецификации html 4.01 предполагает, что name у изображений уникален »
Тогда получается, что разработчики JS наплевали на спецификации - ведь метод возвращает массив
Цитата Igor_I:
как вывести список переменных из некоторого массива, по типу var_dump, print_r в php »
Ещё 5 минут назад не знал, но гугл мне помог:
Код: Выделить весь код
function print_r(arr, level) {   
    var print_red_text = "";   
    if(!level) level = 0;   
    var level_padding = "";   
    for(var j=0; j<level+1; j++) level_padding += "    ";   
    if(typeof(arr) == 'object') {   
        for(var item in arr) {   
            var value = arr[item];   
            if(typeof(value) == 'object') {   
                print_red_text += level_padding + "'" + item + "' :\n";   
                print_red_text += print_r(value,level+1);   
        }    
            else    
                print_red_text += level_padding + "'" + item + "' => \"" + value + "\"\n";   
        }   
    }    
  
    else  print_red_text = "===>"+arr+"<===("+typeof(arr)+")";   
    return print_red_text;   
}   
  
//Пример вызова функции   
alert(print_r(document.location));
Не стоит проверять его работу на print_r(window) или на не-объектах-и-не-массивах IE падает, во всяком случае.

Цитата Igor_I:
В IE 6 версии так и не работает. »
Не работает getElementsByName? Видимо, не поддерживается.

Отправлено: 20:56, 24-12-2008 | #9


Ветеран


Сообщения: 1862
Благодарности: 132

Профиль | Сайт | Отправить PM | Цитировать


Не работает getElementsById.

Гугль помогает когда знаешь что искать и как это применить. Вот почему нет аналога php.net?

Только location и работает, на все остальное Furebug говорит "too much recursion" ругаясь на эту строчку -
print_red_text += print_r(value,level+1);

-------
ДИЛЕТАНТ - это курьезный человек, который испытывает удовольствие делать то, чего не умеет.
AMD 4200+, MSI Neo2Platinum, 2Gb, ATI 9600, D-Link DWL-G510, FreeBSD 8.0, KDE 4.3.4


Отправлено: 22:04, 24-12-2008 | #10



Компьютерный форум OSzone.net » Компьютеры + Интернет » Вебмастеру » [решено] Javascript. Скрыть - показать картинки при помощи getElementsByName

Участник сейчас на форуме Участник сейчас на форуме Участник вне форума Участник вне форума Автор темы Автор темы Шапка темы Сообщение прикреплено

Похожие темы
Название темы Автор Информация о форуме Ответов Последнее сообщение
Разное - [решено] Как скрыть пользователей при загрузке PrianikOV Microsoft Windows 2000/XP 21 15-02-2014 23:15
Загрузка - [решено] Можно ли при загрузке скрыть наличие второй ОС? ivanovandrey Microsoft Windows 2000/XP 1 04-10-2009 18:20
Интерфейс - [решено] Скрыть имя пользователя при входе в систему d_dek Microsoft Windows 2000/XP 4 24-07-2007 11:17
[решено] JavaScript. Скрыть/показать элемент по событию. System Failure Вебмастеру 12 20-07-2007 12:24
Смена стиля при помощи javascript pauluss Вебмастеру 1 05-01-2006 17:08




 
Переход