使用if檢查類，然後添加類jquery

我是jquery的新手，並且存在以下代碼的一些問題，代碼嘗試在單擊時替換項目的類，第一部分按預期工作。如果該項目有一個沒有它的類它添加featSelected，但是如果我然後再次單擊以取消選擇它，它不會添加無類。任何想法，將不勝感激，溫柔，因爲我在學習jquery的拋出（從書，看看一些課程，但！）。使用if檢查類，然後添加類jquery

<script type="text/javascript"> 
      $('li span[id^="feat"]').click(function(){ 
      if ($(this).hasClass('none')) { 
       $(this).addClass("featSelected") 
      } 

      else if ($(this).hasClass('featSelected')) { 
       $(this).addClass("none") 
      } 

    }) 

    </script>

任何幫助，將不勝感激。

jason

來源

2011-11-28 Jason Congerton

了'none'類是已經在那裏爲你沒有刪除！你能包含你的初始HTML嗎？ – ManseUK

您應該使用http://api.jquery.com/toggleClass/ – soju

使用內置toggleClass()功能：

$('li span[id^="feat"]').click(function(){ 
    $(this).toggleClass("none featSelected"); 
});

工作演示：http://jsfiddle.net/7fBLH/

或者，你可能要考慮不使用none作爲類名稱，因爲它聽起來像你用它在語義上說「這個元素沒有class」。如果是這樣的話，你應該使用默認樣式和CSS層疊：

li span[id^="feat"] { 
    /* default styles here */ 
} 
.featSelected { 
    /* these styles show when the element has this class name */ 
}

來源

2011-11-28 10:31:15

我對所有的工作表示歉意！多麼偉大的論壇。我去了切換課程！甚至沒有機會喝一杯茶，我有三個答案！謝謝！！ –

@Jason：沒問題（只是警惕誰看到你稱這個地方爲論壇;-)）。另外，不要忘記，您可以將您認爲最有用的答案標記爲正確的解決方案。這可能有助於未來網站訪問者遇到同樣的問題，因爲您可以快速找到解決方案。 –

您的代碼只是添加新的類名稱。您也可以刪除舊的類名：

$('li span[id^="feat"]').click(function(){ 
    $(this).toggleClass("none featSelected"); 
});

編輯：

$('li span[id^="feat"]').click(function(){ 
    if ($(this).hasClass('none')) { 
     $(this).removeClass("none"); 
     $(this).addClass("featSelected"); 
    } else if ($(this).hasClass('featSelected')) { 
     $(this).removeClass("featSelected"); 
     $(this).addClass("none"); 
    } 
});

但基於你在做什麼，你可以在他們兩人的使用toggleClass我注意到你的代碼失蹤語句結尾的分號。我在上面的例子中添加了它們，爲了將來的參考，您應該使用always use semicolons以javascript結束語句。

來源

2011-11-28 10:29:01

+1爲toggleClass（） – ManseUK

切換類看起來是最好的方式，但它不起作用？是否因爲我必須已經設置了類來顯示用戶已經選擇的內容，請參閱html; –

class =「 featSelected「 class =」none「>＃txt_feat_name＃ checked =「checked」 />

' –

jQuery的addClass()方法不會覆蓋任何現有的類 - 如果您想要覆蓋元素上的類，則需要做的不僅僅是調用addClass()。

由於您實際上沒有刪除'none'類，因此您的if語句總是計算爲true，並且else代碼從未得到執行。

來源

2011-11-28 10:31:13

使用if檢查類，然後添加類jquery

回答

相關問題