Javascript jQuery'；s addClass不'；不要添加一个类

我正忙着填写登记表。其中一个步骤是选择您的性别：

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

颜色切换功能在鼠标悬停时起作用，但在单击时不起作用。这是我的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>

这里有一些在HTML中遗漏的ID和内容，这些只是用于定位的包装

如您所见，我在CSS中创建了一个

active

类，用于当有人单击时。在那里设置的位置是彩色的。 现在，当有人单击一个图标时，我希望它看到活动类，并更改颜色。这是由jQuery完成的：

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

但这愚蠢的事情就是行不通。。。我有没有在选档器上出错

谢谢。

试试这个：

$("#setmale").click(function() {
    $(this).addClass('active');
});
$("#setfemale").click(function() {
    $(this).addClass('active');
});

或

如果只想激活已单击的按钮，请执行以下操作：

$(document).on('click', 'div.submenu > .sprite', function() {
    var that = $(this);
    $('div.sprite').not(that).removeClass('active');
    that.addClass('active');
})

---

我真的很容易解决什么，你有只是改变你的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

和

.male.active

链接在一起

另外，对JS代码的一点改进是将单击代码更改为

$（this.addClass（'active'）

as

$（this）

是引发单击事件的元素

你的js没有错，忽略所有的js答案会让你陷入困境。

你的JavaScript很好（尽管可以简化）。问题实际上是CSS：

错误

#registercontainer .submenu .male .active // this will match a descendant of .male

正确

#registercontainer .submenu .male.active // this will match .male that is also .active

演示：

---

简化版本：

而不是使用

.addClass（）

，您可以使用它来帮助您使用单个函数切换

类

并且，确保您的
选择器
正确。
更有意义！您可以通过使用
$（'#setmale，#setfemale'）来改进这一点。单击（）
当然……您可以显示更多的HTML吗？其中是
#registercontainer
？@putvande
#registercontainer
是绝对父级，所有内容都存储在其中。它包含单独的背景和边距。它是这样运行的：
#registercontainer
->
#submenugender
->
.submenu
->
.sprite
->
.male/.female
我的+1来回答一个详细的问题。这和我的答案不一样吗？@TimBJames-我们在几秒钟之内就发布了。我认为你的问题是礼貌的，而不是指责。
#registercontainer .submenu .male:hover, #registercontainer .submenu .male.active {
    background-position: -7px -397px;
}

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

#registercontainer .submenu .male .active // this will match a descendant of .male

#registercontainer .submenu .male.active // this will match .male that is also .active