#javascript #html #jquery
Есть 5 переключателей надо чтобы при смене их позиций вкл/выкл менялся цвет текста рядом с ними.Цвет текста не важен. Пример: /* Вторая кнопка */ .cmn-toggle { position: absolute; margin-left: -9999px; visibility: hidden; } .cmn-toggle+label { display: block; position: relative; cursor: pointer; outline: none; user-select: none; top: 495px; left: 575px; z-index: 8; } input.cmn-toggle-round+label { padding: 2px; width: 50px; height: 30px; background-color: #dddddd; border-radius: 60px; } input.cmn-toggle-round+label:before, input.cmn-toggle-round+label:after { display: block; position: absolute; top: 1px; left: 1px; bottom: 1px; content: ""; } input.cmn-toggle-round+label:before { right: 1px; background-color: #161616; border-radius: 60px; transition: background 0.4s; } input.cmn-toggle-round+label:after { width: 30px; height: 32px; background-color: #fff; border-radius: 100%; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); transition: margin 0.4s; } input.cmn-toggle-round:checked+label:before { background-color: #4cda64; } input.cmn-toggle-round:checked+label:after { margin-left: 21px; } /* Третья кнопка */ .cmn-toggle1 { position: absolute; margin-left: -9999px; visibility: hidden; } .cmn-toggle1+label { display: block; position: relative; cursor: pointer; outline: none; user-select: none; top: 555px; left: 575px; z-index: 9; } input.cmn-toggle-round1+label { padding: 2px; width: 50px; height: 30px; background-color: #dddddd; border-radius: 60px; } input.cmn-toggle-round1+label:before, input.cmn-toggle-round1+label:after { display: block; position: absolute; top: 1px; left: 1px; bottom: 1px; content: ""; } input.cmn-toggle-round1+label:before { right: 1px; background-color: #161616; border-radius: 60px; transition: background 0.4s; } input.cmn-toggle-round1+label:after { width: 30px; height: 32px; background-color: #fff; border-radius: 100%; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); transition: margin 0.4s; } input.cmn-toggle-round1:checked+label:before { background-color: #4cda64; } input.cmn-toggle-round1:checked+label:after { margin-left: 21px; } /* Первая кнопка */ .cmn-toggle2 { position: absolute; margin-left: -9999px; visibility: hidden; } .cmn-toggle2+label { display: block; position: relative; cursor: pointer; outline: none; user-select: none; top: 337px; left: 575px; z-index: 7; } input.cmn-toggle-round2+label { padding: 2px; width: 50px; height: 30px; background-color: #dddddd; border-radius: 60px; } input.cmn-toggle-round2+label:before, input.cmn-toggle-round2+label:after { display: block; position: absolute; top: 1px; left: 1px; bottom: 1px; content: ""; } input.cmn-toggle-round2+label:before { right: 1px; background-color: #161616; border-radius: 60px; transition: background 0.4s; } input.cmn-toggle-round2+label:after { width: 30px; height: 32px; background-color: #fff; border-radius: 100%; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); transition: margin 0.4s; } input.cmn-toggle-round2:checked+label:before { background-color: #4cda64; } input.cmn-toggle-round2:checked+label:after { margin-left: 21px; } /* Четвертая кнопка */ .cmn-toggle3 { position: absolute; margin-left: -9999px; visibility: hidden; } .cmn-toggle3+label { display: block; position: relative; cursor: pointer; outline: none; user-select: none; top: 576px; left: 575px; z-index: 7; } input.cmn-toggle-round3+label { padding: 2px; width: 50px; height: 30px; background-color: #dddddd; border-radius: 60px; } input.cmn-toggle-round3+label:before, input.cmn-toggle-round3+label:after { display: block; position: absolute; top: 1px; left: 1px; bottom: 1px; content: ""; } input.cmn-toggle-round3+label:before { right: 1px; background-color: #161616; border-radius: 60px; transition: background 0.4s; } input.cmn-toggle-round3+label:after { width: 30px; height: 32px; background-color: #fff; border-radius: 100%; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); transition: margin 0.4s; } input.cmn-toggle-round3:checked+label:before { background-color: #4cda64; } input.cmn-toggle-round3:checked+label:after { margin-left: 21px; } /* Пятая кнопка */ .cmn-toggle4 { position: absolute; margin-left: -9999px; visibility: hidden; } .cmn-toggle4+label { display: block; position: relative; cursor: pointer; outline: none; user-select: none; top: 637px; left: 575px; z-index: 9; } input.cmn-toggle-round4+label { padding: 2px; width: 50px; height: 30px; background-color: #dddddd; border-radius: 60px; } input.cmn-toggle-round4+label:before, input.cmn-toggle-round4+label:after { display: block; position: absolute; top: 1px; left: 1px; bottom: 1px; content: ""; } input.cmn-toggle-round4+label:before { right: 1px; background-color: #161616; border-radius: 60px; transition: background 0.4s; } input.cmn-toggle-round4+label:after { width: 30px; height: 32px; background-color: #fff; border-radius: 100%; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); transition: margin 0.4s; } input.cmn-toggle-round4:checked+label:before { background-color: #4cda64; } input.cmn-toggle-round4:checked+label:after { margin-left: 21px; }текст
текст
текст
текст
текст
Ответы
Ответ 1
Поднимаемся от чекбокса вверх до ближайшего родителя с классом "switch", в котором находим элемент: $(".switch input[type='checkbox']").click(function(){ $(this).closest(".switch").find("p"). css("color", this.checked? "green" : "black"); });
Комментариев нет:
Отправить комментарий