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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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