Как установить css в jQuery с несколькими комбинаторами

У меня есть CSS, который мне нужно изменить с помощью jQuery. Строка css выглядит так:

.switch-vertical input ~ input:checked ~ .toggle-outside .toggle-inside {
  top: 40px;
}

Итак, я попробовал следующее:

$('.switch-vertical input ~ input:checked ~ .toggle-outside .toggle-inside').css('top', '20px');

Но это ничего не делает, это также не дает ошибки. Как я могу установить строку CSS, которая выглядит так?

Я знаю, что лучше всего использовать классы, но можно ли это сделать по-другому?

@RoryMcCrossan «статичным» способом, да. Но здесь, вероятно, ожидается, что это применяется динамически, только когда флажок действительно установлен, и снова уходит, как только input:checked больше не соответствует. Это потребует манипулирования реальным правилом CSS, а не просто перезапись встроенных стилей.

CBroe 14.12.2020 10:53

Прочитав вопрос еще раз, вы правы. Я удалил комментарий.

Rory McCrossan 14.12.2020 10:56
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
124
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Как я могу установить строку CSS, которая выглядит так?

Функция jQuery css не создает правила CSS. Функция $ (jQuery), в которую вы передаете селектор, ищет соответствующие элементы для этого селектора, которые существуют в DOM на момент вызова этой функции. Он возвращает объект jQuery (который похож на массив, в основном набор элементов). Затем, когда вы вызываете css, он устанавливает встроенный стиль каждого из этих элементов в наборе в соответствии с тем, что вы предоставляете.

Если вы не видите, что что-то происходит при запуске этого кода, это означает, что на момент запуска этого кода ни один элемент не соответствовал селектору (или изменение top на тех, которые соответствовали, не было визуально очевидным).

Если вы хотите добавить правило CSS, чтобы оно применялось к элементам, которые существуют сейчас или будут добавлены в будущем, один из способов сделать это — добавить элемент style:

$("head").append(
    $("<style/>").text(
        ".switch-vertical input ~ input:checked ~ .toggle-outside .toggle-inside {\n" +
        "  top: 40px;\n" +
        "}"
    )
);

Живой пример:

setTimeout(() => {
    $("head").append(
        $("<style/>").text(
            ".switch-vertical input ~ input:checked ~ .toggle-outside .toggle-inside {\n" +
            "  top: 40px;\n" +
            "}"
        )
    );
}, 800);
<div class = "switch-vertical">
  <input />
  <input type = "checkbox" checked />
  <div class = "toggle-outside">
    <div class = "toggle-inside" style = "position: relative">
      Lorem ipsum
    </div>
  </div>
</div>

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

(Примечание: выше я использовал HTML Рори МакКроссана, добавив position: relative к целевому элементу, чтобы вы могли видеть, как он перемещается при добавлении CSS.)

Но это ничего не делает, это также не дает ошибки.

Правильный. jQuery основан на наборах. Выполнение операций над пустым набором не является ошибкой, это просто означает, что ничего не происходит. :-)

Другие вопросы по теме