html5-jquery изменение флажка не сработало - PullRequest
Новая
       2

html5-jquery изменение флажка не сработало

0 голосов
/ 04 сентября 2018

Я использовал метод, описанный в https://proto.io/freebies/onoff/, для реализации включения / выключения в html5.

Сам коммутатор работает нормально, щелкните по нему, и он получит другое состояние, и вы можете запросить проверенное состояние ввода / флажка, и это тоже работает как ожидалось.

Когда вы нажимаете на переключатель, я бы хотел, чтобы какое-то действие было выполнено из javaScript, но я не могу зафиксировать событие, которое выполнит эту работу.

Есть предложения? 

$(document).ready(function () {
        $('#myonoffswitch').change(function () {
              dosomething();
        });
    
    });
.onoffswitch {
        margin-top: 15px;
        position: relative;
        width: 90px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }
    
    .onoffswitch-checkbox {
        display: none;
    }
    
    .onoffswitch-label {
        display: block;
        overflow: hidden;
        cursor: pointer;
        border: 2px solid #FFFFFF;
        border-radius: 20px;
    }
    
    .onoffswitch-inner {
        display: block;
        width: 200%;
        margin-left: -100%;
        transition: margin 0.3s ease-in 0s;
    }
    
        .onoffswitch-inner:before, .onoffswitch-inner:after {
            display: block;
            float: left;
            width: 50%;
            height: 30px;
            padding: 0;
            line-height: 30px;
            font-size: 14px;
            color: white;
            font-family: Trebuchet, Arial, sans-serif;
            font-weight: bold;
            box-sizing: border-box;
        }
    
        .onoffswitch-inner:before {
            content: "User";
            padding-left: 10px;
            background-color: #70FF99;
            color: #FFFFFF;
        }
    
        .onoffswitch-inner:after {
            content: "Admin";
            padding-right: 10px;
            background-color: #EB5555;
            color: #FFFFFF;
            text-align: right;
        }
    
    .onoffswitch-switch {
        display: block;
        width: 18px;
        margin: 6px;
        background: #FFFFFF;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 56px;
        border: 2px solid #FFFFFF;
        border-radius: 20px;
        transition: all 0.3s ease-in 0s;
    }
    
    .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
        margin-left: 0;
    }
    
    .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
        right: 0px;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="onoffswitch">
            <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
            <label class="onoffswitch-label" for="myonoffswitch">
                <span class="onoffswitch-inner"></span>
                <span class="onoffswitch-switch"></span>
            </label>
        </div>

Ответы [ 2 ]

0 голосов
/ 04 сентября 2018

Я попробовал твой код, и он отлично работает для меня ..

Попробуйте это: 

<html>
<head>
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script>$(document).ready(function () {
        $('#myonoffswitch').change(function () {
              console.log('Hello');
        });

    });
</script>
</head>
<body>
    <div class="onoffswitch">
        <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
        <label class="onoffswitch-label" for="myonoffswitch">
            <span class="onoffswitch-inner"></span>
            <span class="onoffswitch-switch"></span>
        </label>
    </div>
</body>
</html>
0 голосов
/ 04 сентября 2018

Сам код работает нормально. Все, что вам нужно сделать, это выполнить свою операцию внутри действия изменения коммутатора. 

$(document).ready(function () {
        $('#myonoffswitch').change(function () {
              console.log('works');
        });
    
    });
.onoffswitch {
        margin-top: 15px;
        position: relative;
        width: 90px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }
    
    .onoffswitch-checkbox {
        display: none;
    }
    
    .onoffswitch-label {
        display: block;
        overflow: hidden;
        cursor: pointer;
        border: 2px solid #FFFFFF;
        border-radius: 20px;
    }
    
    .onoffswitch-inner {
        display: block;
        width: 200%;
        margin-left: -100%;
        transition: margin 0.3s ease-in 0s;
    }
    
        .onoffswitch-inner:before, .onoffswitch-inner:after {
            display: block;
            float: left;
            width: 50%;
            height: 30px;
            padding: 0;
            line-height: 30px;
            font-size: 14px;
            color: white;
            font-family: Trebuchet, Arial, sans-serif;
            font-weight: bold;
            box-sizing: border-box;
        }
    
        .onoffswitch-inner:before {
            content: "User";
            padding-left: 10px;
            background-color: #70FF99;
            color: #FFFFFF;
        }
    
        .onoffswitch-inner:after {
            content: "Admin";
            padding-right: 10px;
            background-color: #EB5555;
            color: #FFFFFF;
            text-align: right;
        }
    
    .onoffswitch-switch {
        display: block;
        width: 18px;
        margin: 6px;
        background: #FFFFFF;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 56px;
        border: 2px solid #FFFFFF;
        border-radius: 20px;
        transition: all 0.3s ease-in 0s;
    }
    
    .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
        margin-left: 0;
    }
    
    .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
        right: 0px;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="onoffswitch">
            <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
            <label class="onoffswitch-label" for="myonoffswitch">
                <span class="onoffswitch-inner"></span>
                <span class="onoffswitch-switch"></span>
            </label>
        </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...