Javascript $（此）.toggleClass不工作

所以我正忙着创建一个迷你网店，我正在使用google的前端（）模板

我想在我的网店里做的是，当用户点击x产品时，我想切换一个类

我在循环中使用闭包来检测对任何产品的点击

我唯一的问题是，这个类不会切换。我尝试使用addClass，它确实可以工作，但并不方便，因为我真的想切换类（从选定产品切换到未选定）

签出我的代码片段&你会明白，你会看到我确实正确地检测到了点击。但是切换类不起作用

$（文档）.ready（函数（）{
控制台日志（“文件准备就绪”）；
对于（变量i=1；i<$（“.products”）。长度；i++）{
（功能（索引）{
$（“.products”）。单击(
职能（e）{
log（“单击成功！”）；
console.log（this）；
$（this.css（“边框”，“1px实心#1976D2”）；
$（this.toggleClass（“mdl shadow--16dp”）；
});
})（i） )；
}
$（“#卡”）.keyup（函数（事件）{
如果（event.keyCode==84）{
log（“类切换！”）；
$（“.products”）.toggleClass（“mdl shadow--2dp mdl shadow--16dp”）；
}
});
});
.mdl-card\u操作{
显示器：flex；
框大小：边框框；
对齐项目：居中；
}
.页面内容.mdl卡{
显示：内联块；
保证金：5px 5px 5px 5px；
}

戴尔XP13
基本利率：1.649,00$
添加到购物车
添加购物车
彩色电子书像素2
基本分类：999,99$
添加到购物车
添加购物车
MacBook13'
基本利率：1.129,00$
添加到购物车
添加购物车
我不确定这里需要循环什么，但我认为这可能是它不起作用的原因。我已经设置了一个没有循环的代码段，所以现在
toggleClass（）
工作得很好，我还向css添加了一个
.border
类，这样更容易处理它。此外，我将这两个
toggleClass（）
组合在一行中，但这只是一个光学特性

查看片段


$（文档）.ready（函数（）{
控制台日志（“文件准备就绪”）；
$（“.products”）。单击（函数（）{
log（“单击成功！”）；
console.log（this）；
$（this.toggleClass（“border”）.toggleClass（“mdl shadow--16dp”）；
});
$（“#卡”）.keyup（函数（事件）{
如果（event.keyCode==84）{
log（“类切换！”）；
$（“.products”）.toggleClass（“mdl shadow--2dp mdl shadow--16dp”）；
}
});
});
.mdl-card\u操作{
显示器：flex；
框大小：边框框；
对齐项目：居中；
}
.页面内容.mdl卡{
显示：内联块；
保证金：5px 5px 5px 5px；
}
.边界{
边框：1px实心#1976D2；
}

戴尔XP13
基本利率：1.649,00$
添加到购物车
添加购物车
彩色电子书像素2
基本分类：999,99$
添加到购物车
添加购物车
MacBook13'
基本利率：1.129,00$
添加到购物车
添加购物车
问题只存在于您的循环中。如果您正在使用类选择器并绑定事件，那么为什么要循环它。因此，与其使用

for (var i = 1; i < $(".products").length; i++) {
    (function(index){
    $(".products").click(
        function(e){
        console.log("click successfull!");
        console.log(this);
         $(this).css("border", "1px solid #1976D2");

         $(this).toggleClass("mdl-shadow--16dp");
        });
    })(i);
}

请让我知道您将面临任何问题。
我循环了这些问题，因为这就是我在另一个项目中获得类似结果的原因，我将使用单击元素的innerHTML。但我肯定是想得太多了，谢天谢地！我循环使用它们，因为这就是我在另一个项目中实现类似功能的方式，在该项目中，我将获取单击元素的innerHTML。但我肯定是想太多了，我应该如何做到这一点，感谢editeed片段，我明白我现在可以做得更简单。CSS边框可以工作，但toggleClass（）不能。我想你误解了
。单击（…）
监听器的工作方式。正如我之前所说的，没有必要遍历每个按钮，因为正如名称所示，它是一个事件侦听器。因此，这就像总是等待您的交互触发处理程序函数一样，特别是当您有多个按钮具有相同的类时，只要单击其中一个按钮，侦听器就会被触发，无论是哪一个（侦听器绑定到哪个类、ID或其他属性）是，你说得完全正确，事实上我误解了听众的工作方式。问了5个星期后读这个问题让我觉得很健忘，现在我对一切都理解得好多了，谢谢你花时间解释和演示“这个”是如何工作的。我现在经常用它，不客气！听到这个消息我很高兴：-）
$(".products").click(
    function(e){
    console.log("click successfull!");
    console.log(this);
    $(this).css("border", "1px solid #1976D2");
    $(this).toggleClass("mdl-shadow--16dp");
});