Javascript jQuery在单击时旋转点始终转到第一项

我正在用基本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:

但是，当我单击点2和点3时，它总是以DOM中的点1幻灯片为目标。

'dot-active'

类成功添加到dot1，但单击2和3时，该类不会被添加

我还尝试在if语句中明确检查真值，如下所示：

if（$（'.dot'）.hasClass（'dot1'）==true）

这是最好的方法吗？或者我应该考虑不同的思维过程吗？ 我建议改为使用，因此给每个

.dot

一个

数据审查
，参考相关
审查
div:

$('.review-module--reviews div').hide(); //Hide all the slides

$('.dot').click(function() {
    var review = $(this).data('review');

    $('.review-module--reviews div').hide(); //Hide all slides
    $('.slider-dots .dot').removeClass('dot-active');  //Remove 'dot-active' class from all the dots

    $(this).addClass('dot-active'); //Active the clicked dot
    $('.review-'+review).show(); //Show the related slide
});

然后单击使用jQuery方法
.data（）
获取评论，并显示具有相关类的div

希望这有帮助


$（'.review模块--reviews div'）.hide（）；
$（'.dot'）。单击（函数（）{
var review=$（this.data（'review'）；
$（'.review模块--reviews div'）.hide（）；
$（'.slider dots.dot'）.removeClass（'dot-active'）；
$（this.addClass（'dot-active'）；
$（'.review-'+review.show（）；
});
.dot处于活动状态{
颜色：绿色；
字体大小：粗体；
}

dot1
dot2
dot3


复习一
复习二
复习三
我建议改为使用，因此给每个
.dot
一个
数据审查
，参考相关
审查
div:

$('.review-module--reviews div').hide(); //Hide all the slides

$('.dot').click(function() {
    var review = $(this).data('review');

    $('.review-module--reviews div').hide(); //Hide all slides
    $('.slider-dots .dot').removeClass('dot-active');  //Remove 'dot-active' class from all the dots

    $(this).addClass('dot-active'); //Active the clicked dot
    $('.review-'+review).show(); //Show the related slide
});

然后单击使用jQuery方法
.data（）
获取评论，并显示具有相关类的div

希望这有帮助


$（'.review模块--reviews div'）.hide（）；
$（'.dot'）。单击（函数（）{
var review=$（this.data（'review'）；
$（'.review模块--reviews div'）.hide（）；
$（'.slider dots.dot'）.removeClass（'dot-active'）；
$（this.addClass（'dot-active'）；
$（'.review-'+review.show（）；
});
.dot处于活动状态{
颜色：绿色；
字体大小：粗体；
}

dot1
dot2
dot3


复习一
复习二
复习三
试试这可能会对您有所帮助-

JAVASCRIPT代码-

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

试试这个也许能帮你-

JAVASCRIPT代码-

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

错误出现在以下代码中：

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')) {

错误出现在以下代码中：

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')) {

使用$（this）作为指向当前/单击的元素的指针，添加类，并相应地删除其余的类…使用$（this）作为指向当前/单击的元素的指针，添加类，并相应地删除其余的类…在过去我做过<代码>$（this）.addClass（'dot-active'）.sides（）.removeClass（'dot-active'）以更改活动状态。使用
.slider dots
与使用
sides（）
相比，是否有性能上的增益/损耗？在这种情况下，两者之间没有区别。在过去我做过
$（this）.addClass（'dot-active'）.sides（）.removeClass（'dot-active'）以更改活动状态。使用
.slider dots
与使用
兄弟姐妹（）。我误解了它的工作原理，我认为
hasClass（）在一个函数中会返回它被点击的类。如果你有10个点？！每次我认为这是使用
data-*attributes
的重点时，您都会添加条件。是的，虽然这回答了您的问题，但我认为
data-
方法通常是一种更好的方法。我需要检查目标。我误解了它的工作原理，我认为
hasClass（）在一个函数中会返回它被点击的类。如果你有10个点？！每次我认为这是使用
data-*属性的重点时，您都会添加条件。是的，虽然这回答了您的问题，但总体而言，
data-
方法是一种更好的方法。