javascript - jQuery 的 addClass 不添加类

Question

我正忙于登记表格。其中一个步骤是选择您的性别:

现在，期望的结果是，如果有人点击男性图标，图标会变成蓝色，当有人点击女性图标时，图标会变成粉红色。

颜色切换的东西在悬停时起作用，但在单击时不起作用。这是我的 HTML:

<div id="submenugender">
    <div class="submenu"><div class="sprite male" id="setmale"></div></div>
    <div class="submenu"><div class="sprite female" id="setfemale"></div></div>
</div>

看起来很简单。所以加载了 .sprite 类，它只是设置了默认的高度和宽度 + 它加载了 Sprite 。然后加载 male 和 female 类，其中包含一个 background-position 元素:

#registercontainer .submenu .male {
    background-position: -7px -462px;
}

#registercontainer .submenu .female {
    background-position: -60px -462px;
}

#registercontainer .submenu .male:hover, #registercontainer .submenu .male .active {
    background-position: -7px -397px;
}

#registercontainer .submenu .female:hover, #registercontainer .submenu .female .active {
    background-position: -60px -397px;
}

这里有一些 ID 和 HTML 中遗漏的东西，那些只是用于定位的包装器。

如您所见，我在 CSS 中创建了一个 active 类，用于当有人点击时。那里设置的位置是彩色的。 现在，当有人单击一个图标时，我希望它看到事件类并改变颜色。这是由 jQuery 完成的:

 $("#setmale").click(function() 
  {
      $('#registercontainer .submenu .male').addClass('active');
  });
  $("#setfemale").click(function() 
  {
      $('#registercontainer .submenu .female').addClass('active');
  });

但是愚蠢的事情就是行不通......我是不是在选择器或其他方面犯了任何错误？

谢谢。

Answer 1

我很容易解决你所拥有的，就是将你的 css 更改为此；

#registercontainer .submenu .male:hover, #registercontainer .submenu .male.active {
    background-position: -7px -397px;
}

#registercontainer .submenu .female:hover, #registercontainer .submenu .female.active {
    background-position: -60px -397px;
}

请注意 .male.active 和 .female.active 链接在一起。 Read more about css chaining

对您的 JS 代码还有一点改进是将您的点击代码更改为 $(this).addClass('active'); as $(this) 是引发点击事件的元素。

你的 js 没有错，忽略所有让你掉进兔子洞的 js 答案。