jQuery

Question

我有一个复选框的HTML，CSS和jQuery代码。但我最近在HTML结构中进行了一些更改，现在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>

Answer 1

您正在检查.form-check是否已选中..它应该是checkbox内的.form-check。

首先在checkbox内查找.form-check，如果选中，则检查其prop，如下所示：

$('.form-check').click(function() {
  var checkbox = $(this).find('input[type=checkbox]')
  $(this).closest('.list-group-item').find('.incomplete').css('display', (checkbox.prop('checked')) ? 'none' : 'block')
  $(this).closest('.list-group-item').find('.complete').css('display', (checkbox.prop('checked')) ? 'block' : 'none')
  $(this).closest('.list-group-item').css('background-color', (checkbox.prop('checked')) ? '#4CAF50' : '')
  $(this).closest('.list-group-item').find('.custom-control-description').css('color', (checkbox.prop('checked')) ? '#fff' : '#2c2b2c')
  $(this).closest('.list-group-item').find('.custom-control-description').css('text-decoration-color', (checkbox.prop('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>

Answer 2

问题在于你的this.isChecked，它始终是未定义的，因此总是评估为false。我将其替换为isChecked，从属于此li项目的复选框的checked属性中获取值。

＆＃13;

＆＃13;

$('.form-check').click(function(){
  var isChecked = $(this).find('#checkbox').prop('checked');
  $(this).closest('.list-group-item').find('.incomplete').css('display', isChecked?'none':'block')
  $(this).closest('.list-group-item').find('.complete').css('display', isChecked?'block':'none')
  $(this).closest('.list-group-item').css('background-color',isChecked?'#4CAF50':'')
  $(this).closest('.list-group-item').find('.custom-control-description').css('color', isChecked?'#fff':'#2c2b2c')
  $(this).closest('.list-group-item').find('.custom-control-description').css('text-decoration-color', isChecked?'#fff':'#ababab')
})

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;