Для каждой страницы свой бэкграунд

Вопрос-ответ JavaScript
1

Всем привет!
Товарищи, подскажите (дайте совет) как сделать правильно…
Картина:
у меня есть 10 страниц (вобще их больше) и нужно для этих, и только для этих 10-ти страниц задать индивидуальный фон для каждой. Подскажите пожалуйста правильное решение друзья ;-)

1 лайк
2
  1. Подключать 10 разных внешних cssок
  2. Навешивать 10 разных классов на body
3

Мне кажется, есть проще решение… Можно ли вытянуть URL страницы в JS? что бы сравнить с ним адрес страницы… и реализовать это все через if/else

4

можно location.pathname
Но я бы делал это на бек-энде

5

Выше, что-то такое советовали по-видимому.
http://test.com/index.php#page1

$('body').data('page', window.location.hash);
<body data-page="#page1">

body[data-page='#page1'] {
  background: yellow;
}

body[data-page='#page2'] {
  background: red;
}
6
  1. Если есть возможность - делай через класс на body элементе. Пусть сервер в зависимости от своей логики добавляет-удаляет класс каждой странице.
  2. Если сайт типа промо, и url каждой страницы уникальный, точно так-же через класс на странице (который ставит javascript) в зависимости от заматчившейся части url:
var urls = {
	'/about/' : 'about-background',
	'/project/' : 'project-background'
};

for (var urlMapping in urls) {
	if (location.href.indexOf(urls) !== -1) {
		document.body.className += (' ' + urls[urlMapping]);
	};
}
1 лайк
7

хм… не работает… хотя цикл срабатывает, и у всех страниц уникальный урл, но в класс “боди” не добавляется (’ ’ + urls[urlMapping])

8

У меня в скрипте ошибка.

if (location.href.indexOf(urls) !== -1) {

Я не проверяю наличие строки-ключа в текущем адресе страницы. Надо так:

if (location.href.indexOf(urlMapping) !== -1) {

И все вместе:

var urls = {
	'/about/' : 'about-background',
	'/project/' : 'project-background'
};

for (var urlMapping in urls) {
	if (location.href.indexOf(urlMapping) !== -1) {
		document.body.className += (' ' + urls[urlMapping]);
	};
}
1 лайк
9

Юху!!! Спасибо!! Все работает. Только нужно убрать слэши, вместо:
’/about/’ : ‘about-background’,
’/project/’ : 'project-background’
должно быть так:
‘about’ : ‘about-background’,
‘project’ : 'project-background’
По крайней мере у меня со слэшами работать не хотело.

10

Зависит от того, какие у вас URL. Если ?page=about или page.html#about - то понятное дело, что со слешами не заработает

11

Как раз дело в том что у меня URL выглядит как http://blablabla.com/kontakty/

12

Учти нюанс, что соответствие между ключом объекта urls и классом добавляемым в боди происходит по вхождению подстроки ключа в url. Это означает, что url вида:

http://site.com/?about

заматчится и получит класс ‘about-background’.

var urls = {
	'about' : 'about-background'
};

лучше искать подстроки в location.pathname

13

Возможно, идет редирект на http://blablabla.com/kontakty

14

Да, я с этим разобрался, все в норме, спасибо!
У меня сейчас еще одна проблемка но с другим проектом… Делаю одностраничник, и на нем в двух местах должен выводиться обратный счетчик (как в интернет магазинах типа осталось: 12дней 14часов 22минут 06секунд). И вот один из них работает(перелистывает) а второй нет… точнее он то перелистывает но не в режиме онлайн. Когда обновляю страницу, на нем обновляются цыфры, но он не “анимирует” как первый.