jQuery-click函数上的Loop next（）

我希望能够循环下一个（）；函数，如果我第四次单击

.active

，则会将其添加回

调整大小\u图标的第一个实例中。我的当前代码不会循环并从所有
.resize\u图标
元素中删除
.active
类

// Check if an element exists with both classes
if ($(".resize__icon.active").length == 0) {

  // If not add active to the first .resize__icon
  $(".resize__icon").first().addClass("active");

}


$（“.resize”）。单击（函数（）{
var xcontext=$（“.resize”）；
var xactive=$（“.resize_uuicon.active”，xcontext）；
var xnext=xactive.next（）；
xactive.removeClass（“active”）；
xnext.addClass（“活动”）；
});
。调整大小{
光标：指针；
显示器：flex；
填充：1.3rem；
边框：1px实心；
}
.调整图标的大小{
填充：0.9雷姆；
边框：1px实心；
}
.resize__图标。活动{
背景：蓝色；
}
您可以在代码末尾添加一个检查，查看是否没有活动元素

// Check if an element exists with both classes
if ($(".resize__icon.active").length == 0) {

  // If not add active to the first .resize__icon
  $(".resize__icon").first().addClass("active");

}

演示：

在本例中，我调整了一些早期代码，使其更加精简，但这是不必要的。唯一需要添加到代码中的是上面给出的块


//将单击事件侦听器添加到。调整大小
$（“.resize”）。单击（函数（）{
//压缩原始代码（这不是必需的）
var xactive=$（this.find（“.resize_uuicon.active”）；
xactive.removeClass（“active”）；
xactive.next（）.addClass（“活动”）；
//检查两个类中是否存在一个元素
如果（$（“.resize\uu icon.active”）.length==0）{
//如果没有，请将活动添加到第一个。调整\uuu图标的大小
$（“.resize__图标”）.first（）.addClass（“活动”）；
}
});
。调整大小{
光标：指针；
显示器：flex；
填充：1.3rem；
边框：1px实心；
}
.调整图标的大小{
填充：0.9雷姆；
边框：1px实心；
}
.resize__图标。活动{
背景：蓝色；
}
只需尝试以下代码-

$(".resize .resize__icon").click(function() {
  // this will remove class form all dom elements
  $(".resize .resize__icon").removeClass("active");
   // now make clicked button active by adding class to it
  $(this).addClass("active");
});