Question

因此，我不确定自己在做什么错，因为在控制台中没有出现任何错误，并且我注释掉了其他JQuery / JavaScript代码，问题仍然存在。单击缩略图时，可以很好地添加这些类，但是单击关闭按钮时，这些类不会被删除。如果我在关闭按钮的单击上添加了警报功能，则可以正常工作。

$('.thumbnail').on('click', function() {

  $(this).find('.modal').addClass('active');
  $(this).find('.modal-image > img').addClass('active');
  $(this).find('.modal-image-caption').addClass('active');

});

$('#close').on('click', function() {

  $(this).parent('.modal').removeClass('active');

  $(this).siblings('.modal-image > img').removeClass('active');
  $(this).siblings('.modal-image-caption').removeClass('active');

});

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>


<div class="modal">

  <span class="close" id='close'>&times;</span>

  <div class="modal-image">

    <img src="https://via.placeholder.com/150x150" alt="">

  </div>
  <!-- modal-image -->

  <div class="modal-image-caption text-center">

    <p>This is some example text</p>

  </div>
  <!-- modal-image-caption -->

</div>
<!-- modal -->

Answer 1

在.thumbnail包含模式的假设下，close按钮的单击会冒泡并再次触发活动状态。

我在功能的末尾添加了return false;。

$('.thumbnail').on('click', function() {

  $(this).find('.modal').addClass('active');
  $(this).find('.modal-image > img').addClass('active');
  $(this).find('.modal-image-caption').addClass('active');

});

$('.close').on('click', function() {
  $(this).parent('.modal').removeClass('active');

  $(this).siblings('.modal-image > img').removeClass('active');
  $(this).siblings('.modal-image-caption').removeClass('active');

  return false;
});

.active {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
HTML:
<div class="thumbnail">
  <div class="modal">

    <span class="close">&times;</span>

    <div class="modal-image">

      <img src="./img/dish.jpg" alt="">

    </div>
    <!-- modal-image -->

    <div class="modal-image-caption text-center">

      <p>This is some example text</p>

    </div>
    <!-- modal-image-caption -->

  </div>
  <!-- modal -->
</div>

关闭按钮不删除类

1 个答案: