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;
}

这里有一些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');，因为$(this)是引发点击事件的元素。

你的js没有错，请忽略所有将你送到兔子洞的js答案。

Answer 2

试试这个：

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

或

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

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');
})

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/

Answer 5

您可以使用.toggleClass()而不是.addClass()，这可以帮助您使用单一功能切换class。

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