Jquery 当用户每次单击元素时执行效果

如何在用户每次使用jquery单击元素时执行此效果

我在单击时添加了一个ripple类，但是当我第二次单击该元素时，它无法执行，因为该类已经添加了。我如何解决这个问题

<div class="circle-ripple"></div>

---

我认为您应该在某个超时后删除该类

$(document).ready(function(){
  $(".circle-ripple").click(function(){
    var selector = $(this);
    selector.addClass("ripple");
    setTimeout(function() { 
      selector.removeClass("ripple");
      }, 2000);
  });
});

根据需要设置超时值。希望这有帮助

---

答案是在Nuhman的评论之后编辑的。

我认为您应该在某个超时后删除该类

$(document).ready(function(){
  $(".circle-ripple").click(function(){
    var selector = $(this);
    selector.addClass("ripple");
    setTimeout(function() { 
      selector.removeClass("ripple");
      }, 2000);
  });
});

根据需要设置超时值。希望这有帮助

---

答案是在Nuhman的评论之后编辑的。

setTimeout

将是一个更好的选择

$（文档）.ready（函数（）{
$（“.circle-ripple”）。单击（函数（）{
变量数据=$（此）
data.addClass（“ripple”）；
setTimeout（函数（）{
data.removeClass（“ripple”）；
}, 500)
});
});
html，正文{
宽度：100%；
身高：100%；
}
身体{
背景色：#4e4e；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.圆形波纹{
背景色：#35ffc3；
宽度：1米；
高度：1米；
边界半径：50%；
}
.涟漪{
-webkit动画：涟漪0.7s线性；
动画：波纹0.7s线性；
动画持续时间：0.5s；
}
@-webkit关键帧纹波{
0% {
长方体阴影：0 0 0 0 0 rgba（101，255，120，0.3），0 0 0 1米rgba（101，255，120，0.3），0 0 0 0 3微米rgba（101，255，120，0.3），0 0 0 5微米rgba（101，255，120，0.3）；
}
100% {
长方体阴影：0.01米rgba（101、255、120、0.3）、0.03米rgba（101、255、120、0.3）、0.05米rgba（101、255、120、0.3）、0.08米rgba（101、255、120、0）；
}
}
@关键帧波纹{
0% {
长方体阴影：0 0 0 0 0 rgba（101，255，120，0.3），0 0 0 1米rgba（101，255，120，0.3），0 0 0 0 3微米rgba（101，255，120，0.3），0 0 0 5微米rgba（101，255，120，0.3）；
}
100% {
长方体阴影：0.01米rgba（101、255、120、0.3）、0.03米rgba（101、255、120、0.3）、0.05米rgba（101、255、120、0.3）、0.08米rgba（101、255、120、0）；
}
}
setTimeout
我想是一个更好的选择
$（文档）.ready（函数（）{
$（“.circle-ripple”）。单击（函数（）{
变量数据=$（此）
data.addClass（“ripple”）；
setTimeout（函数（）{
data.removeClass（“ripple”）；
}, 500)
});
});
html，正文{
宽度：100%；
身高：100%；
}
身体{
背景色：#4e4e；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.圆形波纹{
背景色：#35ffc3；
宽度：1米；
高度：1米；
边界半径：50%；
}
.涟漪{
-webkit动画：涟漪0.7s线性；
动画：波纹0.7s线性；
动画持续时间：0.5s；
}
@-webkit关键帧纹波{
0% {
长方体阴影：0 0 0 0 0 rgba（101，255，120，0.3），0 0 0 1米rgba（101，255，120，0.3），0 0 0 0 3微米rgba（101，255，120，0.3），0 0 0 5微米rgba（101，255，120，0.3）；
}
100% {
长方体阴影：0.01米rgba（101、255、120、0.3）、0.03米rgba（101、255、120、0.3）、0.05米rgba（101、255、120、0.3）、0.08米rgba（101、255、120、0）；
}
}
@关键帧波纹{
0% {
长方体阴影：0 0 0 0 0 rgba（101，255，120，0.3），0 0 0 1米rgba（101，255，120，0.3），0 0 0 0 3微米rgba（101，255，120，0.3），0 0 0 5微米rgba（101，255，120，0.3）；
}
100% {
长方体阴影：0.01米rgba（101、255、120、0.3）、0.03米rgba（101、255、120、0.3）、0.05米rgba（101、255、120、0.3）、0.08米rgba（101、255、120、0）；
}
}
如果要避免超时，可以像这样重新插入元素（我只更改了JavaScript）：


$（文档）.ready（函数（）{
$（“.circle-ripple”）。单击（函数（）{
//使用ripple类重新插入div
const new_元素=$（this）.clone（true）；
新元素addClass（“ripple”）；
$（此）.before（新元素）；
$（this.remove（）；
});
});
html，正文{
宽度：100%；
身高：100%；
}
身体{
背景色：#4e4e；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.圆形波纹{
背景色：#35ffc3；
宽度：1米；
高度：1米；
边界半径：50%；
}
.涟漪{
-webkit动画：涟漪0.7s线性；
动画：波纹0.7s线性；
动画持续时间：0.5s；
}
@-webkit关键帧纹波{
0% {
长方体阴影：0 0 0 0 0 rgba（101，255，120，0.3），0 0 0 1米rgba（101，255，120，0.3），0 0 0 0 3微米rgba（101，255，120，0.3），0 0 0 5微米rgba（101，255，120，0.3）；
}
100% {
长方体阴影：0.01米rgba（101、255、120、0.3）、0.03米rgba（101、255、120、0.3）、0.05米rgba（101、255、120、0.3）、0.08米rgba（101、255、120、0）；
}
}
@关键帧波纹{
0% {
长方体阴影：0 0 0 0 0 rgba（101，255，120，0.3），0 0 0 1米rgba（101，255，120，0.3），0 0 0 0 3微米rgba（101，255，120，0.3），0 0 0 5微米rgba（101，255，120，0.3）；
}
100% {
长方体阴影：0.01米rgba（101、255、120、0.3）、0.03米rgba（101、255、120、0.3）、0.05米rgba（101、255、120、0.3）、0.08米rgba（101、255、120、0）；
}
}
如果要避免超时，可以像这样重新插入元素（我只更改了JavaScript）：


$（文档）.ready（函数（）{
$（“.circle-ripple”）。单击（函数（）{
//使用ripple类重新插入div
const new_元素=$（this）.clone（true）；
新元素addClass（“ripple”）；
$（此）.before（新元素）；
$（this.remove（）；
});
});
html，正文{
宽度：100%；
身高：100%；
}
身体{
背景色：#4e4e；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.圆形波纹{
背景色：#35ffc3；
宽度：1米；
高度：1米；
边界半径：50%；
}
.涟漪{
-webkit动画：涟漪0.7s线性；
动画：波纹0.7s线性；
动画持续时间：0.5s；
}
@-webkit关键帧纹波{
0% {
长方体阴影：0 0 0 0 rgba（101，255，120，0.3），0 0 0 1em rgba（101，255，120，0.3），0 0 0 0 3em rgba（101，255，120，0.3），0
$(document).ready(function(){
  $(".circle-ripple").click(function(){
    var selector = $(this);
    selector.addClass("ripple");
    setTimeout(function() { 
      selector.removeClass("ripple");
      }, 2000);
  });
});