Количество объектов в function

[f1nik]

Здравствуйте.

Использую простенькую функцию:

function hide(nodeId){    var node = document.getElementById(nodeId);    if (node)    {        node.style.display = 'none';    } }function show(nodeId){    var node = document.getElementById(nodeId);    if (node)    {        node.style.display = 'inline';    } }

Так вот. У меня несколько картинок(объектов) и замысел в том, чтобы при нажатии на одну кнопку - появлялась одна картинка, а все остальные исчезали

Прописал вот что: 

 

onclick="show('car'),hide('car2','car3','car4','car5','car6')"

Так вот, в итоге, почему-то hide применяется не ко всем объектам, которые я прописал, а только к  первым 2 (или 3), остальные игнорируют функцию.

Почему?

Какие есть пути решения проблемы?

Заранее благодарен.

 

 

Edited October 6, 2015 by f1nik

[Great Rash]

Вам нужно сделать как минимум 2 улучшения.

 

1) Отвяжитесь от ID и привяжитесь к классам или data-атрибутам. Это позволит вам не писать кучу бессмысленных идентификаторов типа car2, car3 и т.п.

2) В качестве аргумента функции вам нужно использовать массив. А если уж вы хотите использовать текст, то вам нужно превратить его в массив (распарсить).

 

Пример:

var elementsToHide = 'car'; // будем искать элементы с классом .carfunction hide(clName) {  var nodes  = document.getElementsByTagName('img'), // находим все картинки      length = nodes.length,                         // узнаём сколько всего у нас картинок на странице      node   = null;  for (var i = 0; i < length; i++) {    node = nodes[i]; // i-тая нода        if (node.className.indexOf('clName') > -1) { // если в имени класса присутствует 'car', значит этот элемент нужно спрятать      node.style.display = 'none';    }  }}

Этот пример подходит для старых браузеров. Если же вас интересуют только новые браузеры (на самом деле основная проблема только в ИЕ7 и ниже, даже в ИЕ8 приведённый ниже код будет работать с некоторыми оговорками), то можно смело использовать более просто и правильный подход:

var elementsToHide = '.car'; // ищем элементы с CSS-селектором '.car' (обратить внимание на точку впереди)function hide(elements) {  var nodes = document.querySelectorAll('img' + elements), // получаем все картинки на странице с классом car      length = nodes.length;  for (var i = 0; i < length; i++) {    nodes[i].style.display = 'none'; // нет нужды отсеивать что-то (за нас это сделал метод .querySelectorAll()  }}

[Veseloff]

Вы неправильно используете аргументы в функции. У вас функция принимает один аргумент и что-то с ним делает.

http://jsfiddle.net/71zabbhm/

Если вы передадите несколько аргументов, то ничего не поменяется.

http://jsfiddle.net/71zabbhm/1/

Если вы хотите передавать много аргументов в функцию, то используйте arguments и итерируйте его

http://jsfiddle.net/71zabbhm/2/

[f1nik]

Спасибо за помощь.

Все получилось. Вопрос закрыт.