Компьютерный форум OSzone.net  

Компьютерный форум OSzone.net (http://forum.oszone.net/index.php)
-   Вебмастеру (http://forum.oszone.net/forumdisplay.php?f=22)
-   -   [решено] Javascript. Скрыть - показать картинки при помощи getElementsByName (http://forum.oszone.net/showthread.php?t=126644)

Igor_I 21-12-2008 22:19 986616
Javascript. Скрыть - показать картинки при помощи getElementsByName
 
Привет. Нужна помощь.
Имеем таблицу в которой в одном столбце есть картинки. Нужно по событию, в данном случае чекбокс в ячейке "миниатюра", либо показать, либо скрыть картинки.
Насколько я понял, нужно использовать 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>

Coutty 22-12-2008 09:07 986851
Вот примерно так:
Код:
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 987509
Спасибо, работает.
Даже в Konqueror работает, а в шестом ослике не хочет. Ну и фиг с ним. :)
Вот только не понял переключателя - выключателя, какая между ними разница?

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

Coutty 23-12-2008 03:55 987750
Цитата:
Цитата 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.

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

Igor_I 23-12-2008 23:03 988516
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 сделал в начале цикла.

Igor_I 24-12-2008 20:04 989371
Я бы не сказал, что тема совсем решена. В IE 6 версии так и не работает.

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

Coutty 24-12-2008 20:56 989428
Цитата:
Цитата 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? Видимо, не поддерживается.

Igor_I 24-12-2008 22:04 989507
Не работает getElementsById.

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

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

Coutty 25-12-2008 04:02 989660
Цитата:
Цитата Igor_I
Не работает getElementsById. »
Потому что надо в единственном числе упоминать элемент, а не во множественном. Вот id уж точно не должен повторяться.
getElementById
Цитата:
Цитата Igor_I
Только location и работает, на все остальное Furebug говорит "too much recursion" ругаясь на эту строчку »
Да, действительно =^_^'= Значит, придётся объекты искать по интернету.
Например, на w3schools.com
JavaScript reference
HTML DOM reference (скорее всего именно это и заинтересует).

Busla 25-12-2008 13:27 989870
Цитата:
Цитата Coutty
Busla: Только спецификации html 4.01 предполагает, что name у изображений уникален
Тогда получается, что разработчики JS наплевали на спецификации - ведь метод возвращает массив »
ключевое слово у изображений

Igor_I 26-12-2008 00:25 990414
Цитата:
Цитата Coutty
Потому что надо в единственном числе упоминать элемент, а не во множественном. Вот 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 990523
Я понял, в чём загвоздка - 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';
      }
}
HTML код:
    <th scope="col">Миниатюра<input type="checkbox" value="ON" id="chkbox" onclick="op()" /></th>

Igor_I 26-12-2008 20:52 991082
: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;
        }
}


Время: 14:58.

Время: 14:58.
© OSzone.net 2001-