javascript - 点击时的 jQuery 轮播点总是转到第一项

Question

我正在使用基本的 jquery 构建一个轮播 - 我使用 .css() 规则来简单地切换每张幻灯片之间的不透明度。

我想要执行此操作的方法是单击每个点，我想检查特定类是否存在以及它是否隐藏所有其他项目并显示该项目。到目前为止我已经:

$('.dot').click(function() {
  $('.review-module--reviews').children().css('opacity', 0);
    if ($('.dot').hasClass('dot1')) {
      $('.review-one').css('opacity', 1);
      $('.dot1').addClass('dot-active');
    } else if ($('.dot').hasClass('dot2')) {
      $('.review-two').css('opacity', 1);
      $('.dot2').addClass('dot-active');
    } else {
      $('.review-three').css('opacity', 1);
      $('.dot3').addClass('dot-active');
   }
});

HTML:

<div class="review-module">
  <div class="review-module--reviews">
    <div class="review-one">

    </div>
    <div class="review-two">

    </div>
    <div class="review-three">

    </div> 
  </div>
  <span class="slider-dots">
    <div class="dot dot1"></div>
    <div class="dot dot2"></div>
    <div class="dot dot3"></div>
  </span>
</div>

但是，当我单击点 2 和点 3 时，它始终瞄准 DOM 中的点 1 幻灯片。 'dot-active' 类已成功添加到 dot1，但单击 2 和 3 时，未添加该类。

我还尝试显式检查 if 语句中的真实值，如下所示:

if ($('.dot').hasClass('dot1') === true)

这是最好的方法吗？或者我应该考虑不同的思维过程？

Answer 1

错误在这段代码中:

if ($('.dot').hasClass('dotX'))

您实际上在这里做的是获取所有 .dot 元素的列表，并检查第一个元素是否具有 dotX 类。正如您可以想象的，这将始终选取第一个 .dot 元素，该元素具有 dot1 类。

您可能想要做的是检查单击的元素是否具有dotX类，为此您只需检查该元素。

通过使用点击处理程序的当前范围来执行此操作:

if ($(this).hasClass('dotX')) 

或者通过检查点击事件的目标:

$('.dot').click(function(e) {
  $('.review-module--reviews').children().css('opacity', 0);
    if ($(e.target).hasClass('dot1')) {