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类，它只设置默认的高度和宽度并加载精灵图像。然后加载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;
}

这里有一些在HTML中缺失的ID和其他内容，它们只是用于定位的包装器。

正如您所看到的，我在CSS中创建了一个active类，用于当某人单击时。那里设置的位置是彩色的。 现在，当有人单击图标时，我希望它看到活动类，并更改颜色。这是通过jQuery完成的：

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

但这个愚蠢的东西就是不工作... 我在选择器上犯了什么错误吗？谢谢。

- sushibrain

---

你能展示更多的HTML吗？#registercontainer在哪里？ - putvande

@putvande #registercontainer 是绝对父级，所有内容都存储在其中。它包含单独的背景和边距。运行方式如下：#registercontainer -> #submenugender -> .submenu -> .sprite -> .male/.female - sushibrain

我支持提供详细问题的做法。 - Tim B James

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 是链接在一起的。阅读更多有关CSS链接的内容请点击此处。

另外，请改进您的JS代码，只需将点击代码更改为$(this).addClass('active');，因为$(this)是引发点击事件的元素。 你的JS没有问题，请忽略所有JS答案并让我们帮助你。

- Tim B James

Answer 2

试试这个：

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

或者

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

- WhiteLine

---

更有意义的是！当然，您可以通过使用$（“#setmale，＃setfemale”）.click（） 来改进此代码... - athms

Answer 3

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

如果您想仅激活已单击的选项:

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

- kapantzak

Answer 4

你的 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

示例: http://jsfiddle.net/byb95u6p/ 简化版本: http://jsfiddle.net/byb95u6p/1/

- Tim M.

---

这不就是和我的答案一样吗？ - Tim B James

@TimBJames - 我们几乎同时发布了。我会假设你的是礼貌的问题，而不是指责。 - Tim M.

Answer 5

与其使用.addClass()，您可以使用.toggleClass()，它将帮助您使用单个函数切换class。

并且，请确保您的selector正确。

- atiquratik