jquery - 更改 Span CSS 类 OnClick

Question

我有一个像这样的 Span 标签

<span id="SpanHeader" class="CourseHeader"><a class="SubCourses" href="#" ><strong>@course.CourseTitle</strong></a></span>

Span 由名为 CourseHeader 的 CSS 类设置样式。当用户单击 Span 中的超链接时，我希望 Span CSS 类与另一个 CSS 类进行切换。

我有以下 CSS 元素

/********* Course Collaspable Headings ******/
.CourseHeader
{
    background-color: #F5F5F5; 
    border: 1px solid black; 
    display: inline-block; 
    width: 600px; 
    padding: 4px; 
    color: Black;
}

.CourseHeader.Black
{
    background-color: #000000;
    border: 1px solid black;
    display: inline-block;
    width: 600px;
    padding: 4px;
    color: #FFFFFF;
}

下面的 JQuery 代码尝试在单击超链接后使 Span 更改样式

$("a.SubCourses").click(onSubCourses);

function onSubCourses() {

    $(".SpanHeader").toggleClass("Black");

}

我尝试看看其他人是如何实现这一目标的，like this但是我自己无法让它工作。

有人可以帮忙吗？

谢谢。

Answer 1

应该是，您已经使用了id HTML 中的选择器 <span id="SpanHeader" class="CourseHeader">

$("#SpanHeader").toggleClass("Black");

而不是

 $(".SpanHeader").toggleClass("Black");