1
我有一個複選框的HTML，CSS和jQuery代碼。但是我最近在HTML結構中做了一些改變，現在jQuery不再工作。而且因爲我是初學者，所以我不知道如何解決這個問題。在jQuery中檢查目標複選框
有人可以看看，只是讓我知道什麼jQuery應該定位，所以它會改變複選框時檢查元素的樣式？
$('.form-check').click(function(){
$(this).closest('.list-group-item').find('.incomplete').css('display', (this.checked)?'none':'block')
$(this).closest('.list-group-item').find('.complete').css('display', (this.checked)?'block':'none')
$(this).closest('.list-group-item').css('background-color',(this.checked)?'#4CAF50':'')
$(this).closest('.list-group-item').find('.custom-control-description').css('color', (this.checked)?'#fff':'#2c2b2c')
$(this).closest('.list-group-item').find('.custom-control-description').css('text-decoration-color', (this.checked)?'#fff':'#ababab')
}).custom-control-box {
border-radius: 50%;
height: 30px;
width: 30px;
background-color: #fff;
border: 1px solid black;
position: absolute;
margin-left: -50px;
}
.checkmark__circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 3;
stroke-miterlimit: 10;
stroke: #1b7e45;
animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.checkmark {
width: 30px;
height: 30px;
border-radius: 50%;
display: block;
stroke-width: 5;
stroke: #fff;
stroke-miterlimit: 10;
box-shadow: inset 0px 0px 0px #1b7e45;
animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
border: 1px solid #4c4c4d;
}
.checkmark__check {
transform-origin: 50% 50%;
stroke-dasharray: 48;
stroke-dashoffset: 48;
animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
@keyframes stroke {
100% {
stroke-dashoffset: 0;
}
}
@keyframes scale {
0%,
100% {
transform: none;
}
50% {
transform: scale3d(1.1, 1.1, 1);
}
}
@keyframes fill {
100% {
box-shadow: inset 0px 0px 0px 30px #1b7e45;
}
}
input[type=checkbox] {
display: none;
}
input[type=checkbox] + svg {
display: none;
}
input[type=checkbox]:checked + svg {
display: block;
}
.form-check {
position: relative;
}
.form-check label {
align-items: center;
justify-content: left;
padding-left: 50px;
cursor: pointer;
}
.custom-control-description {
font-size: 12px;
line-height: 2.6;
}
.form-check label svg {
position: absolute;
top: 0;
left: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<li class="list-group-item p-4 border-top-0 first-group-item">
<div class="form-check mb-0">
<label class="mb-0">
<span class="custom-control-box align-middle"></span>
<input type="checkbox" name="item_1" value="item 1" id="checkbox"/>
<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
<circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none" />
<path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
</svg>
<span class="custom-control-description align-middle">Checkbox</span>
</label>
</div> <!-- /.form-check -->
<div class="ml-auto status">
<p class="mb-0 incomplete">pending</p>
<p class="mb-0 complete">done</p>
</div>
</li>
究竟它是如何不工作？它沒有運行嗎？它運行但沒有執行預期的行爲？你有沒有收到任何錯誤信息？ –
@FreemanLambda複選框被選中時，它不會設置元素的樣式。但它在我的HTML更新之前確實有效。所以我假設這是因爲我在jQuery中瞄準了錯誤的東西。但我不知道如何解決它。 – hemoglobin