Войти

Показать полную графическую версию : [решено] Javascript. Скрыть - показать картинки при помощи getElementsByName

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


<!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>
Coutty
22-12-2008, 09:07
Вот примерно так:

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');
}
}
Изменение стиля я оставил, но это переключатель того, что есть, а не включатель-выключатель. Можно завести глобальную переменную и в ней хранить состояние, если надо.
Igor_I
22-12-2008, 21:39
Спасибо, работает.
Даже в Konqueror работает, а в шестом ослике не хочет. Ну и фиг с ним. :)
Вот только не понял переключателя - выключателя, какая между ними разница?
Busla
22-12-2008, 23:56
Да, только это убирает все картинки на странице, а не только миниатюры ;-)
Поэтому о getElementsByName в чистом виде придётся забыть. Классический вариант: передавать функции id таблицы, перебирать у неё всех потомков, сравнивая картинка это или нет. И опять же: все ли картинки внутри таблицы - миниатюры?
Coutty
23-12-2008, 03:55
Даже в Konqueror работает, а в шестом ослике не хочет. »
Да, я забыл проверить в других браузерах... Если руки дойдут - посмотрю. А почему нельзя ID использовать? Ведь страница, как я понимаю, динамически генерируется. Написать везде что-то вроде id="img0", id="img1", ... , id="img12", а потом в скрипте использовать цикл с обращением:

n = 12; // количество миниатюр
for (i = 0; i < n; i++)
{
document.getElementById('img' + i).style.display = 'none'; // или 'block'
}

Вот только не понял переключателя - выключателя, какая между ними разница? »
Переключатель - переключает состояние. Вот в примере 2 строки выключены и одна включена. Переключатель изменит на 2 строки вкл и 1 выкл. А выключатель будет включать и выключать все миниатюры, независимо от того, были ли включены некоторые из них.

Да, только это убирает все картинки на странице, а не только миниатюры ;-) »
Почему? Это же не getElementsByTagName. Атрибут name='srcimage' прописан не на всех изображениях.
Впрочем, я бы предпочёл getElementById или getElementByClass из Prototype.
Busla
23-12-2008, 11:40
Coutty, да, каюсь - написал не вникая особо вчитываясь O:-)
Только спецификации html 4.01 предполагает, что name у изображений уникален ;)
Igor_I
23-12-2008, 23:03
Coutty, почти уговорил :)
<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 сделал в начале цикла.
Igor_I
24-12-2008, 20:04
Я бы не сказал, что тема совсем решена. В IE 6 версии так и не работает.

Кстати, Coutty, не подскажешь как вывести список переменных из некоторого массива, по типу var_dump, print_r в php. К примеру, в том же document.getElementsByName. Либо здесь - http://www.spravkaweb.ru/javascript/reference/document/object, приведены объекты, как узнать что в этих объектах содержится.
Coutty
24-12-2008, 20:56
Только спецификации html 4.01 предполагает, что name у изображений уникален »
Тогда получается, что разработчики JS наплевали на спецификации - ведь метод возвращает массив :)
как вывести список переменных из некоторого массива, по типу 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 падает, во всяком случае.

В IE 6 версии так и не работает. »
Не работает getElementsByName? Видимо, не поддерживается.
Igor_I
24-12-2008, 22:04
Не работает getElementsById.

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

Только location и работает, на все остальное Furebug говорит "too much recursion" ругаясь на эту строчку -
print_red_text += print_r(value,level+1);
Coutty
25-12-2008, 04:02
Не работает getElementsById. »
Потому что надо в единственном числе упоминать элемент, а не во множественном. Вот id уж точно не должен повторяться.
getElementById
Только location и работает, на все остальное Furebug говорит "too much recursion" ругаясь на эту строчку »
Да, действительно =^_^'= Значит, придётся объекты искать по интернету.
Например, на w3schools.com
JavaScript reference (http://www.w3schools.com/jsref/default.asp)
HTML DOM reference (http://www.w3schools.com/htmldom/dom_reference.asp) (скорее всего именно это и заинтересует).
Busla
25-12-2008, 13:27
Busla: Только спецификации html 4.01 предполагает, что name у изображений уникален
Тогда получается, что разработчики JS наплевали на спецификации - ведь метод возвращает массив »ключевое слово у изображений
Igor_I
26-12-2008, 00:25
Потому что надо в единственном числе упоминать элемент, а не во множественном. Вот id уж точно не должен повторяться. »
Так ведь он и не повторяется.
Зато я повторюсь :) Вот что я имелл ввиду.
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';
}
}
А ещё я это нашел - http://www.tutorialspoint.com/javascript/index.htm
Coutty
26-12-2008, 09:28
Я понял, в чём загвоздка - IE не отрабатывал событие onchange, пока не кликнешь по пустому месту. Поменяйте на onclick, а скрипт тоже чуть изменил:

function op() {
chk = document.getElementById("chkbox").checked;
for(i = 1; i < <?=$image_on_page?>; i++)
{
document.getElementById("img" + i).style.display = chk ? 'inline' : 'none';
}
}

<th scope="col">Миниатюра<input type="checkbox" value="ON" id="chkbox" onclick="op()" /></th>
Igor_I
26-12-2008, 20:52
:durak:
Если указаны width и height, но значения пустые, то ИЕ плюёт на изображение с высооооокой колокольни. То есть вообще его не показывает.

Напоследок, скрипт отмечающий все чекбоксы. Работает: IE 6.2900.2180, Firefox 2.0.0.1, Opera 9.27
function checkAll(oForm, cbName, checked)
{
for (var i=0; i < oForm[cbName].length; i++)
{
oForm[cbName][i].checked = oForm[cbName][i].checked == false ? true : false;
}
}



© OSzone.net 2001-2012