JQuery编号的ID

我正在尝试使用几个按钮在红色和绿色之间切换，我已经浏览了Jquery文档，但我似乎无法理解这一点

您可以在我的代码片段中看到，当我单击按钮时，所有按钮都会变成不同的颜色

另外，一定有一个更短的方法来做这件事，而不是他们的方式，我已经扩大了它

任何帮助都将是惊人的

$（文档）.ready（函数（）{
$（“.but”）。单击（函数（）{
$（“#sq_0”）.css（“背景色”、“红色”）；
}，函数（）{
$（“#sq_0”）.css（“背景色”、“绿色”）；
});
});
$（文档）.ready（函数（）{
$（“.but”）。单击（函数（）{
$（“#sq_1”）.css（“背景色”、“红色”）；
}，函数（）{
$（“#sq_1”）.css（“背景色”、“绿色”）；
});
});
$（文档）.ready（函数（）{
$（“.but”）。单击（函数（）{
$（“#sq_2”）.css（“背景色”、“红色”）；
}，函数（）{
$（“#sq_2”）.css（“背景色”、“绿色”）；
});
});
$（文档）.ready（函数（）{
$（“.but”）。单击（函数（）{
$（“#sq_3”）.css（“背景色”、“红色”）；
}，函数（）{
$（“#sq_3”）.css（“背景色”、“绿色”）；
});
});
$（文档）.ready（函数（）{
$（“.but”）。单击（函数（）{
$（“#sq_4”）.css（“背景色”、“红色”）；
}，函数（）{
$（“#sq_4”）.css（“背景色”、“绿色”）；
});
});

您可以使用
$（this）。在单击函数中查找（'.here'）
，以指向该
按钮的特定
div
：


$（文档）.ready（函数（）{
$（“.but”）。单击（函数（）{
$（this.find（'.here'）.toggleClass（'green'）；
});
});
.green{
背景色：绿色！重要；
}
您可以使用
toggleClass
功能切换背景为绿色的类

另外，您应该在定义的类中使用样式，并且可以通过向
类添加边距来避免额外的div包装

在此示例中，所有按钮的背景都将更改：


$（“.but”）。单击（函数（）{
$（“.here”）.toggleClass（“单击此处”）；
});
。但是{
背景：无；
边界：无；
}
.这里{
宽度：30px；
高度：30px；
背景色：红色；
利润率：6px；
}
.点击这里{
背景颜色：绿色；
}
您应该使用jQuery类选择器来选择具有给定类的所有元素

这是一个例子



课堂演示
司{
宽度：120px；
高度：40px；
浮动：左；
填充：10px；
利润率：10px；
背景色：#EEEEEE；
}
div class=“notMe”
div class=“myClass”
span class=“myClass”
$（“.myClass”）.css（“边框”，“3px实心红色”）；
如果您不想应用
！重要信息
从样式中删除颜色并使用纯类，从
$（this）获取。查找（'.here'）
并切换该类


$（文档）.ready（函数（）{
$（“.but”）。单击（函数（）{
$（this.find（'.here'）.toggleClass（'green'）；
});
});
。在这里{
背景色：红色；
}
给，格林{
背景颜色：绿色；
}

它应该是什么，当单击按钮时，只有一个应该是绿色的，单击绿色时，它应该再次是红色的？@Justcode这是正确的，这就是我要寻找的功能！