Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Скрыть таблицы в зависимости от урла (https://javascript.ru/forum/misc/2038-skryt-tablicy-v-zavisimosti-ot-urla.html)

vovach 23.10.2008 20:34

Скрыть таблицы в зависимости от урла
 
Здравствуйте.
Прошу помощи. Нужно скрыть несколько таблиц в зависимости от того, какой урл. Вот сочинил:
if(url='http://mysite.ru/video') {
document.getElementById('audio').style.display='none';
document.getElementById('book').style.display='none'; 
 }
if(url='http://mysite.ru/audio') {
document.getElementById('video').style.display='none';
document.getElementById('book').style.display='none'; 
 }
if(url='http://mysite.ru/book') {
document.getElementById('audio').style.display='none';
document.getElementById('video').style.display='none'; 
 }

Не работает условие, тоесть на всех страницах скрывает. И скрывает только первую таблицу, а их несколько, страница динамическая. Чего не так?

Octane 23.10.2008 20:40

А как же http://www.mysite.ru/… вы так все возможные формы адреса будете проверять? Лучше заведите на страницах соответствующий идентификатор и проверяйте именно его.

Kolyaj 23.10.2008 20:41

vovach,
оператор сравнения: ==

vovach 23.10.2008 21:47

Octane,
в том то и дело, что только за урл можно зацепиться.

Kolyaj,
Можно поподробнее? Если url== то вообще не работает. Честно говоря это мой первый скрипт :)

Kolyaj 23.10.2008 21:57

Куда уж подробнее? Вы в операторе if вместо сравнения делаете присваивание, которое возвращает правый операнд, и, следовательно, условие всегда истинно.

Переменная url как инициализируется?

vovach 23.10.2008 22:12

Kolyaj,
ну про сравнение я теперь понял. А с урлом то чего сделать, как его инициализировать? То есть сначала урлу задать значение надо?

Kolyaj 23.10.2008 22:15

Вот вы используете переменную url. Вы ее откуда вообще взяли?

vovach 23.10.2008 22:20

Kolyaj,
Ну так я думал, что url он url и есть :)
url=location.href - так надо?

vovach 23.10.2008 22:29

Во, точно, заработало! Только таблица одна скрывается почему? У меня таблиц допустим с id=video четыре штуки, а скрывается одна.

Kolyaj 23.10.2008 22:37

Потому что id должен быть уникальным в пределах страницы.

vovach 23.10.2008 22:48

А как то их все скрыть можно? Ведь сколько пользователи добавят видео, столько и будет таблиц с одинаковым id на странице. И их все надо скрыть на определенных страницах.

vovach 24.10.2008 13:02

Друзья, ну неужели никто не знает, как это сделать? Второй день маюсь. Нужно скрыть несколько одинаковых таблиц в зависимости от того, какой урл. По айди понятно что не получится скрыть, т.к. одинаковых таблиц несколько. По name тоже не работает ни в таблицах ни в слоях. Есть вариант со стилями наверное, но как это реализовать?

Octane 24.10.2008 14:12

Получить коллекцию таблиц по классу и в цикле все их последовательно скрыть.

vovach 24.10.2008 14:42

Octane,
мдя, еще бы знать, как это сделать.

Octane 24.10.2008 15:45

Ну что ж Вы поиском пользоваться не умеете? :)
Ну ладно напишу здесь сложный вариант :D
Для новых браузеров достаточно выполнить «getElementsByClassName», напишем функцию, которая будет выполнять тоже самое в старых браузерах:
function findClass(str, node) {
	var node = node || document, list = node.getElementsByTagName('*'), length = list.length, Class = str.split(/\s+/), classes = Class.length, array = [], i, j, key;
	for(i = 0; i < length; i++) {
		key = true;
		for(j = 0; j < classes; j++) if(list[i].className.search('\\b' + Class[j] + '\\b') == -1) key = false;
		if(key) array.push(list[i]);
	}
	return array;
}

Функция получает все дочерние элементы указанного узла «node» или всего документа «document» и затем в цикле ищет элементы у которых в атрибуте «className» встречаются все указанные вами классы.
Теперь для новых браузеров добавим native-функцию «getElementsByClassName», чтобы быстрее работало, для этого в нашу функцию «findClass» добавим условие и одну строчку в начале:
function findClass(str, node) {
	if(document.getElementsByClassName) return (node || document).getElementsByClassName(str);
	else {
		var node = node || document, list = node.getElementsByTagName('*'), length = list.length, Class = str.split(/\s+/), classes = Class.length, array = [], i, j, key;
		for(i = 0; i < length; i++) {
			key = true;
			for(j = 0; j < classes; j++) if(list[i].className.search('\\b' + Class[j] + '\\b') == -1) key = false;
			if(key) array.push(list[i]);
		}
		return array;
	}
}

Теперь рассмотрим как это можно использовать:
window.onload = function() { // После того как готов DOM

       // В цикле пробегаем по всем найденным элементам и скрываем их
	var i, list = findClass('audio'), length = list.length;
	for(i = 0; i < length; i++) list[i].style.display = 'none';

};

В (X)HTML классы могут быть записаны как угодно:
<table class="audio">…</table>
<table class="audio table1">…</table>
<table class="super audio">…</table>
<table class="table2 audio disabled">…</table>

во всех таблицах встречается CSS-класс «audio», и они будут скрыты.

Вот :) не все так сложно, надо только немного постараться)))

vovach 24.10.2008 16:46

Octane,
два дня в гугле сижу, информация разрозненная, а как в кучу собрать ума не приложу. Вообще меня пугает джаваскрипт, стараюсь не пользоваться, но здесь никак без него. Спасибо огромное :) , сейчас буду разбираться, надеюсь заработает.

HelpeR 24.10.2008 18:25

а еще можно при добавлении видео дать таблице (если это php)
$id='video'.rand(1,999);

а в js искать следующим образом
var tbl = document.getElementsByTagName('table');
for(var i=0; i<tbl.length; i++) {
  if(tbl[i].id.indexOf('video') != -1) {
    tbl[i].style.display = 'none';
  }
}

ну конечно это все будет в зависимости от урла страницы и все id тоже будут уникальными

Octane 24.10.2008 19:15

HelpeR, ваше решение бестолковое и неэффективное по ряду причин:
  • Для чего использовать генерацию уникальных идентификаторов, если для решения поставленной задачи подходят классы?
  • Генерация идентификатора случайным образом в пределах от 1 до 999, дает большой шанс вероятности, что идентификаторы совпадут, что не допустимо.
  • Как верстальщику при таком подходе оформить все однотипные таблицы, ведь он не знает какой будет идентификатор, или в CSS написать все возможные варианты от 1 до 999? Придётся дописать классы для каждой таблицы, получится лишний код.
  • Хоть и не значительная, но все же лишняя нагрузка на сервер.

HelpeR 24.10.2008 20:45

Octane, да я не думал об этом когда писал код, я лишь предложил один из вариантов решения. Но и вашем случае если ему надо скрыть только таблицы с классами class='audio' как он написал в первом посте, то лучше при добавлении таблицы присваивать ей класс audio а в js с помощью моего метода уже не искать, а сравнивать имя класса таблицы.
tbl[i].className == 'audio'

т.к. если ему придется оформить вторую таблицу с описанием и он захочет дать название классу audioDescription то и эта таблица тоже скроется, чего и не требовалось.

Octane 24.10.2008 21:19

Цитата:

Сообщение от HelpeR (Сообщение 7503)
Но и вашем случае если ему надо скрыть только таблицы с классами class='audio' как он написал в первом посте, то лучше при добавлении таблицы присваивать ей класс audio а в js с помощью моего метода уже не искать, а сравнивать имя класса таблицы.
tbl[i].className == 'audio'

Так делать неправильно! Для одного элемента можно записать несколько классов через пробел.

Цитата:

Сообщение от HelpeR (Сообщение 7503)
он захочет дать название классу audioDescription то и эта таблица тоже скроется, чего и не требовалось.

Эта таблица не скроется, поиск в строке с именами классов идет учитывая разделители слов.

HelpeR 24.10.2008 21:24

Цитата:

Сообщение от Octane (Сообщение 7504)
Эта таблица не скроется, поиск в строке с именами классов идет учитывая разделители слов.

Если я не ошибаюсь, то в названии стиля пробел нельзя использовать

Octane 24.10.2008 21:33

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

HelpeR 24.10.2008 22:44

значит если название класса class="hello how are you"; то в стилях будут искаться классы с этими названиями. А если какого то из них не существует, то стиль просто не применяется?

Octane 24.10.2008 22:54

Да, именно так, к этому элементу будут применены стили классов «hello», «how», «are» и «you». Стили будут складываться, а пересекающиеся свойства будут перекрываться в порядке записи классов, но такое пересечение обычно стараются избежать.

Kolyaj 25.10.2008 14:01

Цитата:

Сообщение от Octane
а пересекающиеся свойства будут перекрываться в порядке записи классов

Будут применяться правила, описанные в более "тяжелом" селекторе. Вычисление веса:
каждое название тэга - 1 балл,
каждое название класса - 10 баллов,
и каждое название ID - 100 баллов

Получим для стилей
Код:

.class1 .class2 {
  color: red;
}
.class2 {
  color: green;
}

Элемент с классом class2, содержащийся в .class1 будет иметь красный цвет текста, несмотря на то, что зеленый описан позже.

Octane 25.10.2008 16:46

Ну да это тоже :-)

HelpeR 25.10.2008 18:43

ммм... очень интересно узнал новое для себя хотя это css, а не javascript но все равно спасибо вам!


Часовой пояс GMT +3, время: 16:29.