1

HTML:

<div class="wrapper">
  <div class="content"><a href="/url/?id=1661&amp;country=1">Город 1</a></div>
  <div class="content"><a href="/url/?id=734&amp;country=1">Город 2</a></div>
</div>

Добрый день!

Подскажите, как при нажатии на ссылку 1 изменить css для класса .wrapper. А при нажатии на ссылку 2, возвращать обратно.

При этом изменить html нельзя (то есть добавить ID, class нельзя). Можно только добавить новый JS/Jquery.

Можно как-то завязаться на изменение параметров в URI? То есть, если изменился параметр id в URL, присвоить класс для .wrappper.

На php-то всё просто:

<?
if ($_SERVER['REQUEST_URI'] == '/url/?id=1661&country=1') {
    echo
    '<style>
    .wrapper {
    }
    </style>';
}
?>
2
  • А при нажатии на ссылку перехода не произойдет? Или вам нужно менять класс на вновь загруженной странице? 1 июн 2018 в 11:17
  • @AntonShchyrov да, забыл добавить. Произойдёт. На новой странице. То есть по сути, получается, что есть URL текущей страницы такой - то css такое 1 июн 2018 в 11:20

1 ответ 1

4

Все очень просто. Для начала, вам нужно получить текущий адрес страницы (он хранится в объекте window.location), потом, из свойства search взять только GET параметры. А дальше из всех параметров регуляркой выкусить только значение id

function getId() {
  const params = window.location.search;
  const res = params.replace(/^.*?id=(\d+).*$/, '$1');
  return res;
}

Потом, вам нужно элементу с классом wrapper добавить новый класс, на основании полученного id

$('.wrapper').addClass('city-' + getId());

Ну а дальше в CSS определить все нужные вам стили

.city-734 {
  background-color: red;
}

.city-1661 {
  background-color: green;
}

Если нет возможности подключить CSS, то напишите функцию, которая по заданному id возвратит нужный цвет или набор стилей

function getCSSById(id) {
  switch (id) {
    case 734: return {"background-color": "red"};
    case 1661: return {"background-color": "green"};
    default: return {};
  }
}

И установите этот стиль элементу

$('.wrapper').css(getCSSById(getId()));
1
  • 1
    хороший мануал ... + от меня ...хоть и не я спрашивал но СПС с большой буквы
    – user33274
    1 июн 2018 в 13:18

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.