我希望.indicator
仅在empty
为required
时显示.edit-icon
和:checked
字段。
我试图将其用作验证,以便用户知道缺少哪些输入。
$("#edit-toggle").prop("checked", true);
$(".edit :input").attr("disabled", true);
function editStatus() {
$("#edit-toggle").on("change", function() {
$(this).toggleClass("new");
toggleStatus();
});
}
function toggleStatus() {
if ($("#edit-toggle").is(":checked")) {
$(".indicator").removeClass('animate');
$(".edit :input").attr("disabled", true);
} else {
$(".indicator").addClass('animate');
$(".edit :input").removeAttr("disabled");
}
}

.edit-icon i {
color: white;
padding: 10px;
border-radius: 50%;
}
.edit-icon input[type="checkbox"],
.edit-icon .checked {
display: none;
background: blue;
}
.edit-icon input[type="checkbox"],
.edit-icon .unchecked {
background: green;
-webkit-animation: bounceUp 0.5s forwards;
animation: bounceUp 0.5s forwards;
}
.edit-icon input[type="checkbox"]:checked~.checked {
display: inline-block;
-webkit-animation: bounceUp 0.5s forwards;
animation: bounceUp 0.5s forwards;
}
.edit-icon input[type="checkbox"]:checked~.unchecked {
display: none;
}
.block {
display: flex;
align-items: center;
}
.indicator {
transform: scale(0);
transition: transform 250ms;
height: 10px;
width: 10px;
border-radius: 50%;
background-color: red;
}
.indicator.animate {
transform: scale(1);
}
@-webkit-keyframes bounceUp {
0%,
20%,
50%,
80%,
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
40% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
60% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
}
@keyframes bounceUp {
0%,
20%,
50%,
80%,
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
40% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
60% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
}

<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="edit-icon" for=edit-toggle>
<input id="edit-toggle" type="checkbox" name="toggle" onchange="toggleStatus()"/>
<i class="fa fa-check-circle unchecked"></i>
<i class="fa fa-pencil checked"></i>
</label>
<div class="edit block">
<input class="edit-input" type="text" name="name" autocomplete="off" value="Text 1" required/>
<div class="indicator"></div>
</div>
<div class="edit block">
<input class="edit-input" type="text" name="name" autocomplete="off" value="" required/>
<div class="indicator"></div>
</div>
<div class="edit block">
<input class="edit-input" type="text" name="name" autocomplete="off" value="Text 2" required/>
<div class="indicator"></div>
</div>
&#13;
答案 0 :(得分:1)
如果您只想在用户点击编辑时进行验证,您可以执行此操作,但我在底部还有其他建议:
$("#edit-toggle").prop("checked", true);
$(".edit :input").attr("disabled", true);
function editStatus() {
$("#edit-toggle").on("change", function() {
$(this).toggleClass("new");
toggleStatus();
});
}
function toggleStatus() {
if ($("#edit-toggle").is(":checked")) {
$(".indicator").removeClass('animate');
$(".edit :input").attr("disabled", true);
} else {
$('.edit :input').each(function() {
if($(this).val() == '' && $(this).prop('required')) {
$(this).parent().find('.indicator').addClass('animate');
}
});
$(".edit :input").removeAttr("disabled");
}
}
.edit-icon i {
color: white;
padding: 10px;
border-radius: 50%;
}
.edit-icon input[type="checkbox"],
.edit-icon .checked {
display: none;
background: blue;
}
.edit-icon input[type="checkbox"],
.edit-icon .unchecked {
background: green;
-webkit-animation: bounceUp 0.5s forwards;
animation: bounceUp 0.5s forwards;
}
.edit-icon input[type="checkbox"]:checked~.checked {
display: inline-block;
-webkit-animation: bounceUp 0.5s forwards;
animation: bounceUp 0.5s forwards;
}
.edit-icon input[type="checkbox"]:checked~.unchecked {
display: none;
}
.block {
display: flex;
align-items: center;
}
.indicator {
transform: scale(0);
transition: transform 250ms;
height: 10px;
width: 10px;
border-radius: 50%;
background-color: red;
}
.indicator.animate {
transform: scale(1);
}
@-webkit-keyframes bounceUp {
0%,
20%,
50%,
80%,
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
40% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
60% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
}
@keyframes bounceUp {
0%,
20%,
50%,
80%,
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
40% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
60% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
}
<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="edit-icon" for=edit-toggle>
<input id="edit-toggle" type="checkbox" name="toggle" onchange="toggleStatus()"/>
<i class="fa fa-check-circle unchecked"></i>
<i class="fa fa-pencil checked"></i>
</label>
<div class="edit block">
<input class="edit-input" type="text" name="name" autocomplete="off" value="Text 1" required/>
<div class="indicator"></div>
</div>
<div class="edit block">
<input class="edit-input" type="text" name="name" autocomplete="off" value="" required/>
<div class="indicator"></div>
</div>
<div class="edit block">
<input class="edit-input" type="text" name="name" autocomplete="off" value="Text 2" required/>
<div class="indicator"></div>
</div>
这将在用户输入时进行检查:
$("#edit-toggle").prop("checked", true);
$(".edit :input").attr("disabled", true);
function editStatus() {
$("#edit-toggle").on("change", function() {
$(this).toggleClass("new");
toggleStatus();
});
}
function toggleStatus() {
if ($("#edit-toggle").is(":checked")) {
$(".edit :input").attr("disabled", true);
} else {
$('.edit :input').each(function() {
if($(this).val() == '' && $(this).prop('required')) {
$(this).parent().find('.indicator').addClass('animate');
}
});
$(".edit :input").removeAttr("disabled");
}
}
$(".edit :input").on('keyup', function() {
var $this = $(this);
var $indicator = $('.indicator', $this.parent());
if ($this.val() == '' && $this.prop('required')) {
$indicator.addClass('animate');
} else {
$indicator.removeClass('animate');
}
});
.edit-icon i {
color: white;
padding: 10px;
border-radius: 50%;
}
.edit-icon input[type="checkbox"],
.edit-icon .checked {
display: none;
background: blue;
}
.edit-icon input[type="checkbox"],
.edit-icon .unchecked {
background: green;
-webkit-animation: bounceUp 0.5s forwards;
animation: bounceUp 0.5s forwards;
}
.edit-icon input[type="checkbox"]:checked~.checked {
display: inline-block;
-webkit-animation: bounceUp 0.5s forwards;
animation: bounceUp 0.5s forwards;
}
.edit-icon input[type="checkbox"]:checked~.unchecked {
display: none;
}
.block {
display: flex;
align-items: center;
}
.indicator {
transform: scale(0);
transition: transform 250ms;
height: 10px;
width: 10px;
border-radius: 50%;
background-color: red;
}
.indicator.animate {
transform: scale(1);
}
@-webkit-keyframes bounceUp {
0%,
20%,
50%,
80%,
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
40% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
60% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
}
@keyframes bounceUp {
0%,
20%,
50%,
80%,
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
40% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
60% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
}
<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="edit-icon" for=edit-toggle>
<input id="edit-toggle" type="checkbox" name="toggle" onchange="toggleStatus()"/>
<i class="fa fa-check-circle unchecked"></i>
<i class="fa fa-pencil checked"></i>
</label>
<div class="edit block">
<input class="edit-input" type="text" name="name" autocomplete="off" value="Text 1" required/>
<div class="indicator"></div>
</div>
<div class="edit block">
<input class="edit-input" type="text" name="name" autocomplete="off" value="" required/>
<div class="indicator"></div>
</div>
<div class="edit block">
<input class="edit-input" type="text" name="name" autocomplete="off" value="Text 2" required/>
<div class="indicator"></div>
</div>