Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.67/3: Рейтинг темы: голосов - 3, средняя оценка - 4.67
50 / 16 / 11
Регистрация: 27.03.2013
Сообщений: 788
1

Как можно использовать псевдокласс в jQuery

16.03.2019, 22:30. Показов 570. Ответов 7
Метки нет (Все метки)

CSS
1
2
3
4
5
6
7
8
9
10
11
12
.checkbox + label:before {
    content: '';
    position: absolute;
    top: -4px;
    left: 0;
    width: 50px;
    height: 26px;
    border-radius: 13px;
    background: #CDD1DA;
    box-shadow: inset 0 2px 3px rgba(0,0,0,.2);
    transition: .2s;
}
как это перевести в jquery ?

наподобие вот такого

Javascript
1
2
3
4
5
6
7
8
9
10
11
   applyStyle('.checkbox + label', {
            'position': 'relative',
            'padding': '0 0 0 60px',
            'cursor': 'pointer' /*тип курсора, рпи наведении
            на текущий селектор*/
        });
 
/*Применение стиля*/
function applyStyle(selector, style) {
    $(selector).css(style);
}
0

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
16.03.2019, 22:30
Ответы с готовыми решениями:

Псевдокласс :hover и jQuery
Добрый вечер. Странная вещь твориться, помогите разобраться. Итак, есть картинка с таким стилем:...

Можно ли использовать переменную в jquery выборке?
можно ли за место селекторов использовать переменную выбрать элемент не так ...

Как использовать компоненты из jQuery?
Здравствуйте товарищи знатоки, скажите пожалуйста неграмотному студенту, в скаченной библиотеке...

MozRepl + jQuery: как использовать?
Установил MozRepl в Firefox, подключился через AutoIt v3. Функции из стандартного JS выполняются...

7
1297 / 874 / 478
Регистрация: 23.08.2015
Сообщений: 2,316
17.03.2019, 01:19 2
masli, :before и :after в js недоступны. Можно сделать через классы к примеру.
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.checkbox + label:before {
    content: '';
    position: absolute;
    top: -4px;
    left: 0;
    width: 50px;
    height: 26px;
    border-radius: 13px;
    background: #CDD1DA;
    box-shadow: inset 0 2px 3px rgba(0,0,0,.2);
    transition: .2s;
}
 
.checkbox.active + label:before {
  'cursor': 'pointer';
}
Javascript
1
$('.checkbox').addClass('active');
Либо откажитесь от before и сделайте отдельный элемент.
1
Эксперт JS
2027 / 1086 / 408
Регистрация: 29.04.2016
Сообщений: 2,603
17.03.2019, 07:09 3
Цитата Сообщение от sad67man Посмотреть сообщение
:before и :after в js недоступны
Да нее... доступны -> https://codepen.io/Mr_Sergo/pe... itors=1100
PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<span>Наведите мышь на элемент</span>
<ul>
    <li>элемент 1</li>
    <li>элемент 2</li>
    <li>элемент 3</li>
</ul>
 
<script>
    applyStyle({
        style : `
            li:hover::before {content: "Это ";}
            li:hover::after {content: " \\00AB";}
        `
    });
 
    function applyStyle(obj){
        $('html > head').append(`<style id="myStyle1">${obj.style}</style>`);
    }
</script>
1
1297 / 874 / 478
Регистрация: 23.08.2015
Сообщений: 2,316
17.03.2019, 07:20 4
Цитата Сообщение от Mr_Sergo Посмотреть сообщение
Да нее... доступны
Ну если только так)
1
Эксперт JS
2027 / 1086 / 408
Регистрация: 29.04.2016
Сообщений: 2,603
17.03.2019, 07:30 5
sad67man,

В нативном это еще проще делается, если интересно загуглите insertRule
0
50 / 16 / 11
Регистрация: 27.03.2013
Сообщений: 788
17.03.2019, 09:02  [ТС] 6
Цитата Сообщение от sad67man Посмотреть сообщение
Либо откажитесь от before и сделайте отдельный элемент.
как? можете простой пример, чем заменить before,

я несколько раз перечитывал о псевдоэлементах, и каждый раз еще больше непонятного , хоть и примеры есть, если бы понимал их смысл, то имеющиеся решение, которое предоставил выше, переделал бы.
0
50 / 16 / 11
Регистрация: 27.03.2013
Сообщений: 788
17.03.2019, 09:05  [ТС] 7
вот что на выходе нужно

ну а затем "слушать" изменения переключателя и запускать нужные функции
0
Изображения
 
50 / 16 / 11
Регистрация: 27.03.2013
Сообщений: 788
17.03.2019, 22:00  [ТС] 8
решено
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
17.03.2019, 22:00

Посоветуйте как можно разобраться в работе с cookies / jQuery
Здравствуйте. Недавно столкнулся с такой задачей как работа с кукисами. Суть задачи следующая: у...

Как можно отправить данные с одного сайта на другой с jQuery
Кто сможет подсказать как эту задачу решить Помогите найти решение как можно сделать передачу...

Добавить свои кнопки на Google map /Как можно было проще/ на jQuery
Есть у меня не большое решение этой проблемы на js с небольшим вкраплением jQuery: function...

Использовать jquery
Kак использовать jquery? Подключаю jquery через include в head: &lt;script type=&quot;text/javascript&quot;...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.