у меня есть вот такой html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="jsChecboxIntoLabel.js"></script>
</head>
<body>
<div>
<label class="checkbox">
<input type="checkbox" />
<div class="divTextNearCheckbox">Я переключаю чекбокс</div>
</label>
</div>
</body>
</html>
вот обычный *.css к нему
.checkbox input {
position: absolute;
z-index: -1;
opacity: 0;
margin: 10px 0 0 20px;
}
.checkbox__text {
position: relative;
padding: 0 0 0 60px;
cursor: pointer;
}
.checkbox__text: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__text:after {
content: '';
position: absolute;
top: -2px;
left: 2px;
width: 22px;
height: 22px;
border-radius: 10px;
background: #FFF;
box-shadow: 0 2px 5px rgba(0,0,0,.3);
transition: .2s;
}
.checkbox input:checked + .checkbox__text:before {
background: #9FD468;
}
.checkbox input:checked + .checkbox__text:after {
left: 26px;
}
.checkbox input:focus + .checkbox__text:before {
box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba(255,255,0,.7);
}
Но мне нужно перевести этот код в jquery и нужно повесить событие, которое бы ловило переключение текста.
$(document).ready(function () {
var selectorCheckbox = '.checkbox'; /*селектор элемента 'label'*/
var selectorCheckboxInput = selectorCheckbox + ' ' + 'input';
/*селектор контейнера 'div', находится внутри элемента 'label'*/
var selectorDivText = '.divTextNearCheckbox';
var nameClassBefore = 'textBefore';
var nameClassAfter = 'textAfter';
/*ситилизация для элемента 'input' типа 'checkbox'*/
makeStyleCheckboxInput(selectorCheckboxInput);
/*стилизация надписи, в контейнере 'div'*/
makeStyleDivFotText(selectorDivText);
/*описываем первоначальное состояние контейнера
* 'div' с текстом*/
addClassBeforeText(selectorDivText, nameClassBefore);
addClassAfterText(selectorDivText, nameClassAfter)
});
/*ситилизация для элемента 'input' типа 'checkbox';
* 'checkbox' становится невидимым*/
function makeStyleCheckboxInput(selector){
applyStyle(selector, {
'position': 'absolute',
'z-index': '-1',
'opacity': '0',
'margin': '10px 0 0 20px'
});
}
/*стилизация надписи, в контейнере 'div';
'position': 'relative'- элемент с относительным
позиционированием.
'padding' - задает смещение элемента, относительно
его позиции, а на его месте остается пустое пространство.
* */
function makeStyleDivFotText(selector) {
applyStyle(selector, {
'position': 'relative',
'padding': '0 0 0 60px',
'cursor': 'pointer',
});
}
/*добавим класс в контейнер с текстом и применим стиль.
* Этот класс будет описывать первоначальное состояние
* контейнера div*/
function addClassBeforeText(selectorForAdd, nameClass) {
$(selectorForAdd).addClass(nameClass);
applyStyle('.' + nameClass, {
'position': 'absolute',
'top': '4px',
'left': '4px',
'width': '25px',
'height': '26px',
'border-radius': '13px',
'background': '#CDD1DA',
'box-shadow': 'inset 0 2px 3px rgba(0,0,0,.2)',
'transition': '.2s',
});
}
function addClassAfterText(selectorForAdd, nameClass) {
$(selectorForAdd).addClass(nameClass);
applyStyle('.' + nameClass, {
'position': 'absolute',
'top': '-2px',
'left': '2px',
'width': '22px',
'height': '22px',
'border-radius': '10px',
'background': '#FFF',
'box-shadow': '0 2px 5px rgba(0,0,0,.3)',
'transition': '.2s'
});
}
/*Применение стиля*/
function applyStyle(selector, style) {
$(selector).css(style);
}
Но стилизация становится совсем другой и я не понимаю почему ?
кто знает подскажите.
