Как изменить CSS элементов с помощью jQuery?

Question

[Расул Гитинов]

Никак не удается справиться с задачей. Подскажите, как правильно сделать:

У меня есть блок .rs-seat-more, при нажатии на который у блока .rs-seat-right-block div должен изменяться CSS на: max-height: initial; и еще при нажатии на тот же блок у блока .rs-seat-wrap должен изменяться CSS на: max-height: initial;

Я просто только начал изучать JavaScript, поэтому для меня это проблема.

Answer 1

[Serj-One]

Ни в коем случае не слушайте тех, кто советует делать это через .css(). Это дурной тон, никогда не нужно менять слили непосредственно через js.
Задавайте нужные стили классу-модификатору, и добавляйте/удаляйте его через .addClass() / .removeClass()

Comments

[Расул Гитинов]

А как мне это использовать именно в моем случае?

[Serj-One]

Расул Гитинов:
codepen.io/Serj-One/pen/YqWOyY
Для простой визуализации использовал background, просто замените это свойство на нужное вам.

[Serj-One]

Расул Гитинов: Кстати, поддержу Михаил Чирский, то, что вы пытаетесь сделать, выглядит довольно странно, и вероятно, есть более правильный метод реализации вашей задумки.

[Расул Гитинов]

Все получилось! Спасибо большое за помощь.

Answer 2

[Павел]

api.jquery.com/css

Answer 3

[Everal]

$('.block').css('color','red');

$('.rs-seat-more).click(function(){
$('.rs-seat-right-block').css('max-height','initial');
$('.rs-seat-wrap').css('max-height','initial');
});

Comments

[Михаил Чирский]

Вы если сами не умеете, так не учите не правильно других, не дай бог конечно увидеть ваши плоды искусства на production

[Расул Гитинов]

Михаил Чирский: А как сделать лучше?

[Михаил Чирский]

Расул Гитинов: Вам же ответил Serj-One, что подобные вещи лучше решать стилями, а в скрипте просто управлять переключением классов, это 100 % лучше и правильнее, чем городить велосипеды с кучей ненужного кода. А если бы сказали, что вы хотите в результате, без ваших max-height и т д, возможно бы предложили и другое решение.

P.S. сколько верстаю, ни разу не видел подобного извращенства с изменением max-height еще и на initial.
Если все правильно сверстать, то простых Css-properties, более чем достаточно

[Расул Гитинов]

Михаил Чирский: Serj-One: Вот мой код

[Расул Гитинов]

У меня по умолчанию срезается часть текста, которая не влезла, а при нажатии на кнопку "подробнее" раскрывается полностью.

[Everal]

Михаил Чирский: Хорошо, можно по полочкам, чем мой код вам не угодил ?

[Михаил Чирский]

Everal: Мне ваш код не может не угодить, вы учитесь изначально не правильно не я, я поддержал товарища, который дал вам правильный совет, а поступайте как считаете нужным, это ваше право. Осуждать не буду, я сделал замечание, что я считаю, это не правильным, по крайней мере в наше время, и там где можно обойтись Css и минимум Js надо использовать все грамотно, ваша задача элементарна, ну вы пишите 3 строчки ненужного Js когда это может решить Css с помощью 1 модификатора.

Answer 4

[Виктор]

Примерно так.

// элемент, на котором кликаем
$('.rs-seat-more').on('click',
function(){
$(.rs-seat-right-block div').css('max-height', 'initial'); // элемент, который изменяем
});

ну и не забудьте обернуть это в init