#javascript #html #css
#javascript #HTML #css
Вопрос:
В приведенном ниже коде я закодировал переключатель, который отключает и включает мои ссылки с помощью CSS. Проблема в том, что мой переключатель не меняет свой внешний вид. Он выполняет свою работу (функциональность JavaScript работает), но внешний вид — нет. У меня нет большого опыта с
Кнопка HTML:
<label class="switch" isValue="0">
<div class="slider round">
</div>
</label>
CSS:
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
}
input[type="checkbox"]:checked input[type="hidden"] .slider,
input[type="checkbox"]:checked .slider {
background-color: #2196F3;
}
input[type="checkbox"]:focus input[type="hidden"] .slider,
input[type="checkbox"]:focus .slider {
box-shadow: 0 0 1px #2196F3;
}
input[type="checkbox"]:checked input[type="hidden"] .slider:before,
input[type="checkbox"]:checked .slider:before {
transform: translateX(26px);
}
Rounded sliders
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.dim.disabled {
pointer-events: none;
background-color: grey;
}
JavaScript:
$(document).on('click', '.switch', function () {
var v = $(".switch").attr("isValue");
if (v == 1) {
$(".switch").attr("isValue", "0");
$(".dim").removeClass("disabled");
}
else {
$(".switch").attr("isValue", "1");
$(".dim").addClass("disabled");
}
});
Я знаю, что с этим что-то не так, потому что это флажок типа ввода.
Спасибо за любую помощь, которую вы можете предоставить.
Комментарии:
1. ваш css неверен. / * Закругленные ползунки * / я полагаю?. и ваш HTML не показывает никаких входных данных, поэтому я могу воспроизвести для четкого тестирования — И я не думаю, что это хорошая идея — помещать DIV внутри метки
2. ему не нужно показывать какие-либо входные данные, это просто переключатель, который включает / отключает ссылку. что мне нужно, так это заставить внешний вид работать, когда я привязываю его к своему JS
Ответ №1:
Хорошо, игнорируя предлагаемый код, который слишком расплывчатый, вот как работает переключение класса jQuery:
$(".switch").on('click', function () {
$(this)
.toggleClass('disabled')
.data('status', ($(this).hasClass("disabled")? '0':'1'));
console.clear();
console.log('data-status value is :', $(this).data('status') );
}); .switch > span {
display: block;
width: 68px;
height: 68px;
background-color: green;
border-radius: 34px;
}
.switch.disabled > span {
background-color: grey;
} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="switch" data-status="1"><span></span></div> Комментарии:
1. Четкое, лаконичное решение. Я бы добавил в комментарии или в в JavaScript, просто чтобы убедиться, что OP знает, как это работает.
Ответ №2:
Используя только CSS, если вы хотели пойти этим путем. Подумал, что это может быть полезно, поскольку вы говорите, что Javascript работает, но внешний вид не изменится.
Базовый переключатель
/** Format Example Body **/
body {
margin: 0;
padding: 0;
background: #f0f0f0;
}
* {
box-sizing: border-box;
}
.container {
max-width: 500px;
margin: 0 auto;
background: #fff;
}
.components {
padding: 20px;
}
.components .content {
margin-bottom: 20px;
}
.default {
margin: 0 5px;
}
.switch {
display: inline-block;
}
.switch input {
display: none;
}
.switch small {
display: inline-block;
width: 100px;
height: 18px;
background: #3a3a3a;
border-radius: 5px;
position: relative;
cursor: pointer;
}
.switch small:after {
content: "No";
position: absolute;
color: #fff;
font-size: 11px;
font-weight: 600;
width: 100%;
text-align: right;
padding: 0 6px;
box-sizing: border-box;
line-height: 18px;
}
.switch small:before {
content: "";
position: absolute;
width: 12px;
height: 12px;
background: #fff;
border-radius: 50%;
top: 3px;
left: 3px;
transition: .3s;
box-shadow: -3px 0 3px rgba(0, 0, 0, 0.1);
}
.switch input:checked~small {
background: #3fc55c;
transition: .3s;
}
.switch input:checked~small:before {
transform: translate(25px, 0px);
transition: .3s;
}
.switch input:checked~small:after {
content: "Yes";
text-align: left;
} <div class="container">
<div class="components">
<div class="content">
<label class="switch default">
<input type="checkbox">
<small></small>
</label>
</div>
</div>
</div> Комментарии:
1. мой переключатель на самом деле работает, но когда я привязываю его к своему javascript, он работает, но внешний вид не
2. Я предлагаю сначала тщательно сформулировать вопрос, чтобы мы не отвечали, а затем вы отредактировали свой вопрос.
Ответ №3:
Я думаю, вам просто нужно указать конкретное имя класса для включенной ссылки или отключенной ссылки
Стиль
.link_enabled {
/* style for enabled link */
}
.link_disabled {
/* style for disabled link */
}
скрипт
$(document).on('click', '.switch', function () {
var v = $(".switch").attr("isValue");
if (v == 1) {
$(".switch").attr("isValue", "0");
$(".switch").removeClass("link_enabled").addClass("link_disabled");
$(".dim").removeClass("disabled");
}
else {
$(".switch").attr("isValue", "1");
$(".switch").removeClass("link_disabled").addClass("link_enabled");
$(".dim").addClass("disabled ");
}
});
Комментарии:
1. css для включен / отключен, да, у меня уже есть проблема в том, что когда я нажимаю на переключатель, он активирует мой css для отключения ссылок, но сам переключатель не меняет внешний вид
Ответ №4:
Для справки, пожалуйста, обратите внимание, что в JS (es6) это проще. И поскольку тема упоминает только javascript (не jQuery) в списке тегов.
document.querySelector('.switch').onclick = function(e) {
this.dataset.status = this.classList.toggle('disabled')?'0':'1';
console.clear();
console.log('data-status value is :', this.dataset.status );
} .switch>span {
display: block;
width: 68px;
height: 68px;
background-color: green;
border-radius: 34px;
}
.switch.disabled>span {
background-color: grey;
} <div class="switch" data-status="1" ><span></span></div>