更改功能以查找图像

Question

在我的示例中，如果您单击其中一个替代图像，我希望显示复选标记图像。现在我的 on change 事件正在注册（见控制台），但图像 .checkmark-img 没有被发现或淡入。fadeBoolToggle 功能是在活动时淡入淡出。

此代码旨在一次只允许选中一个复选框。因此，当有人点击一个输入时，它会取消选中所有输入，然后检查被点击的那个。

 $('.option-check').not(this).prop('checked', false).closest('.product-wrap').find('.checkmark-img').fadeBoolToggle(false);
   this.checked = true;
   $(this).closest('.product-wrap').find('.checkmark-img').fadeBoolToggle(true);

有没有人知道为什么我的图片在点击其中一张替代图片时没有淡入淡出？

Jsfiddle

 jQuery.fn.fadeBoolToggle = function(bool) {
   return bool ? this.fadeIn(400) : this.fadeOut(400);
 }

 $('.option-check').on('change', function() {
   $('.option-check').not(this).prop('checked', false).closest('.product-wrap').find('.checkmark-img').fadeBoolToggle(false);
   this.checked = true;
   $(this).closest('.product-wrap').find('.checkmark-img').fadeBoolToggle(true);
   var test = $('.option-check:checked').val();
   console.log('option check clicked');
   console.log(test);
 });

.product-wrap {
  width: 100%;
  position: relative;
  display: block;
}

.checkmark-img {
  display: none;
  width: 40%;
  height: auto;
  z-index: 2;
  cursor: pointer;
}

.package-check-toggle {
  position: relative;
  height: 100%;
  width: 100%;
  display: block;
}

.calendar-option img {
  margin: 20px auto;
  cursor: pointer;
  width: 50%;
  height: auto;
}

.product-check,
.calendar-check,
.option-check {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="calendar-option">
  <div class="product-wrap">
    <label for="flag-option" class="package-check-toggle">
      <img src='images/cal-flag.jpg' alt='A' class='pg-preview-img'>
      <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img">
      <p class="calendar-option-push"></p>
      <cite>A</cite>
    </label>
  </div>
  <input type="checkbox" class="option-check" id='flag-option' value='A'>
</div>
<div class="calendar-option">
  <div class="product-wrap">
    <label for="nickel-option" class="package-check-toggle">
     <img src='images/cal-nickel.jpg' alt='Brushed Nickel & Black' class='pg-preview-img'>
     <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img">
      <p class="calendar-option-push"></p>
      <cite>B</cite>
    </label>
  </div>
  <input type="checkbox" class="option-check" id='nickel-option' value='B'>

Answer 1

.closest() 返回与选择器匹配的最接近当前项的父项，包括当前对象本身。

因为您将<input>s 放在.product-wrap div 之外...

$(this).closest('.product-wrap')

...返回空。

工作示例：

jQuery.fn.fadeBoolToggle = function(bool) {
   return bool ? this.fadeIn(400) : this.fadeOut(400);
 }

 $('.option-check').on('change', function() {
   $(this).closest('.product-wrap').find('.checkmark-img').fadeBoolToggle(true);
   var test = $('.option-check:checked').val();
   console.log('option check clicked');
   console.log(test);
 });

.product-wrap {
  width: 100%;
  position: relative;
  display: block;
}

.checkmark-img {
  display: none;
  width: 40%;
  height: auto;
  z-index: 2;
  cursor: pointer;
}

.package-check-toggle {
  position: relative;
  height: 100%;
  width: 100%;
  display: block;
}

.calendar-option img {
  margin: 20px auto;
  cursor: pointer;
  width: 50%;
  height: auto;
}

.product-check,
.calendar-check,
.option-check {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="calendar-option">
  <div class="product-wrap">
    <label for="flag-option" class="package-check-toggle">
      <img src='images/cal-flag.jpg' alt='A' class='pg-preview-img'>
      <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img">
      <p class="calendar-option-push"></p>
      <cite>A</cite>
    </label>
    <input type="radio" class="option-check" id='flag-option' name='check-option' value='A'>
  </div>
</div>
<div class="calendar-option">
  <div class="product-wrap">
    <label for="nickel-option" class="package-check-toggle">
     <img src='images/cal-nickel.jpg' alt='Brushed Nickel & Black' class='pg-preview-img'>
     <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img">
      <p class="calendar-option-push"></p>
      <cite>B</cite>
    </label>
    <input type="radio" class="option-check" id="nickel-option" name='check-option' value='B'>
  </div>

将来遇到此类问题时，请考虑有条不紊地使用console.log。我开始了

console.log($(this).closest('.product-wrap').is('.product-wrap'))

如果这会返回 true，我会继续前进

console.log($(this).closest('.product-wrap').find('.checkmark-img').is('.checkmark-img'))

...等等。

---

注意：尽管它重现了问题，但您的 sn-p 看起来像是坏了，它阻止了包括我在内的所有人仔细查看。是否从中取出一些东西，完全取决于您。