Javascript 在CSS类数组上迭代并单击切换类

我有

问题是我需要在单击时切换类。我有课

.col

.col-1 / .col-2 / col-3 etc.

我需要点击右边的应用程序。col-1/col-2是一个扩展类，所以

.col .col-1 .col-1--expand
.col .col-2 .col-2--expand

在此之前，我在CSS中使用了这个悬停，它可以工作，但单击它并没有什么问题。我搜索了一整天的Javascript和jQuery案例，但没有找到任何正确的解决方案。 据我所知，我必须在Javascript中使用forEach函数，但jQuery中的解决方案也是我想要的。 我在我的项目中尝试过类似的东西，但我仍然不擅长Javascript：(

---

可以使用正则表达式匹配元素类，并在单击时切换该元素上的展开类

var matched = this.className.match(/col-\d{1,2}/);

这将在元素的class属性中找到包含

col-

后跟最多两位数字的任何类，这样您就可以满足1-99的要求

matched.length && (matched = matched.pop())

.match（）

返回一个匹配数组，以便确定是否找到了任何匹配项，并从数组中弹出第一个匹配项

var expandClass = matched + '--expand';

因为您正在匹配，例如，

col-1

您可以使用此字符串并附加

--expand

以使

col-1--expand

$(this).toggleClass(expandClass);

根据类的存在，可以使用jQuery添加/删除

expandClass

。有关演示，请参阅

col-3

$（文档）.on（'click'，'col'，函数（）{
var matched=this.className.match（/col-\d{1,2}/）；
if（matched.length&（matched=matched.pop（））{
var expandClass=匹配的+'--expand'；
$（this.toggleClass（expandClass）；
}
})；

.col{
背景颜色：蓝色；
颜色：白色；
填充：.25rem 1rem；
保证金：.250雷姆；
}
.col-1——扩展，
.col-2--扩展，
.col-3--扩展，
.col-4--扩展，
.col-5--扩展，
.col-6——扩展{
背景颜色：绿色；
垫面：1毫米；
垫底：1毫米；
}

1.
2.
3.
4.
5.
6.

欢迎使用StackOverflow！既然您需要jQuery中的解决方案，让我给您一些指导

1。forEach函数在jQuery中作为 方法。生成代码：

// Select your classes, for each of them run a function
$('.col-1').each(function() { });

$('.col-1').each(function() {
    // Click method:
    $(this).click(function() { } );
});

// Or just do:
$('.col-1').click(function() { });

$('.col-1').click(function() {
    $(this).toggleClass("col-1--expand");
});

// Or just add it:
$('.col-1').click(function() {
    $(this).addClass("col-1--expand");
});

2.要在单击时执行某些操作，jQuery有一个可用的方法，它将在单击时调用函数。生成代码：

// Select your classes, for each of them run a function
$('.col-1').each(function() { });

$('.col-1').each(function() {
    // Click method:
    $(this).click(function() { } );
});

// Or just do:
$('.col-1').click(function() { });

$('.col-1').click(function() {
    $(this).toggleClass("col-1--expand");
});

// Or just add it:
$('.col-1').click(function() {
    $(this).addClass("col-1--expand");
});

jQuery不需要循环，可以将click方法本身绑定到所有类。在某些情况下，它可能仍然有用，但现在让我们保持它的基本功能，让代码正常工作

3.添加新的CSS类。在jQuery中，有许多方法可供使用。在这种情况下，您可能正在寻找该方法。其他有用的方法可能包括我和。制作代码：

// Select your classes, for each of them run a function
$('.col-1').each(function() { });

$('.col-1').each(function() {
    // Click method:
    $(this).click(function() { } );
});

// Or just do:
$('.col-1').click(function() { });

$('.col-1').click(function() {
    $(this).toggleClass("col-1--expand");
});

// Or just add it:
$('.col-1').click(function() {
    $(this).addClass("col-1--expand");
});

---

完成后，在你想做一些魔术的其他课程上重复。下次试着花一天时间在上。所有的方法都有，包括很好的例子！祝你好运。

我想我们都在做一个答案！^^很好，我喜欢添加正则表达式。为我工作，非常感谢你的帮助和解释！谢谢你的解释和帮助，我从现在开始，我们将在这个网站上做很好的研究。