При работе с сайтами иногда требуется на лету создать уникальный идентификатор на определенный тег, чтобы применить к нему какое-то css свойство.
Чаще всего сайты используют шаблонную структуру. Это означает, что главная и внутренние страницы могут использовать одинаковую html верстку. Но если нам нужно только на нескольких страницах изменить их внешний вид, то проще на лету подключить класс с заранее заданны стилем.
Рассмотрим пример. Добавим к двум разным страницам уникальные классы на тег <body>, а в самих классах пропишем разный фон. В итоге на разных страницах сайта у нас будет грузиться разный фон.
Делается это так:
<style>
.body1 {
background: #222 url(/templates/baton/images/fon1.jpg) no-repeat!important;
}
.body2 {
background: #999 url(/templates/baton/images/fon2.jpg) no-repeat!important;
}
</style>
<script>
$(document).ready(function(){
if(window.location.pathname == ‘/index.php/o-nas’) { $(‘body’).addClass(“.body1”); }
if(window.location.pathname == ‘/index.php/pages’) { $(‘body’).addClass(“.body2”); }
})
</script>
Здесь мы задали два разных фона на классы .body1 и .body2. Сам же скрипт за счет window.location.pathname будет определять текущую ссылку страницы. Если она совпадет с /index.php/o-nas, то к body добавится класс .body1. Для ссылки /index.php/pages ситуация аналогичная, только будет грузиться класс .body2 с другим фоном.
Этот пример наглядно показывает, как можно сделать более уникальной каждую страницу сайта, в зависимости от ее ссылки. Я часто использую этот метод в мобильных версиях, где бывают страницы-исключения, которым сложно привязаться к уже имеющимися классам.
Но, что если нам нужно добавить какой-то класс ко всем таблицам на сайте, причем уникальный? Для этого воспользуемся each() циклом:
<script>
$(document).ready(function(){
if(window.location.pathname == ‘/index.php/pages’) {
$(‘table’).each(function(i){
$(this).addClass(“mtable” + i);
});
}
})
</script>
В этом примере только на странице /index.php/pages мы задаем каждой таблице уникальный класс .mtable1, .mtable2 … – в зависимости от того, сколько таблиц на сайте. Счет классов будет идти с нуля.
(Пока оценок нет)
Загрузка...