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被鏈接在一起。 閱讀更多關於css鏈的信息

對JS代碼的一點改進是將你的點擊代碼改為$(this).addClass('active'); 因為$(this)是引發click事件的元素。

你的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()來幫助您使用單個函數切換您的class ，而不是使用.addClass() 。

並且，確保您的selector是正確的。