如何動態添加或刪除使用jquery附加到元素的類？

我想在我的網頁中動態地使用jQuery添加和刪除類。這裏; S代碼 -如何動態添加或刪除使用jquery附加到元素的類？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
<head> 
<title></title> 
<meta name="" content=""> 
<script type="text/javascript" src="jquery.js"></script> 
<style type="text/css"> 
    .sub-inactive{display:none;} 
    .sub-active{display:!important;} 
</style> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('.sub').parent().hover(
     function(){ $('.sub').removeClass('sub-inactive').addClass('sub-active'); }, 
     function(){ $('.sub').removeClass('sub-active').addClass('sub-inactive'); }, 
     ); 
    }); 
</script> 
</head> 
<body> 
    <div id="container"> 
     <ul class="main"> 
      <li>link1</li> 
      <li>link2</li> 
      <li>link3 
       <ul class="sub sub-inactive"> 
        <li>link 3a</li> 
        <li>link 3a</li> 
        <li>link 3a</li> 
        <li>link 3a</li> 
       </ul> 
      </li> 
      <li>link4</li> 
      <li>link5</li> 
     </ul> 
    </div> 
</body> 
</html>

基本上，存在連接到一個元素多個類（子活性，在這種情況下的子活動的）。並基於頁面中發生的一些事件，我想動態地改變元素的類狀態。即，例如，如果對於一個元素，現在出現的類是class =「sub sub-active」，我想要使用jquery更改爲class =「sub sub-INACTIVE」....

請讓我知道如何添加/刪除元素的特定類。下面給出的兩行代碼（來自上面的示例）似乎不起作用 -

function(){ $('.sub').removeClass('sub-inactive').addClass('sub-active'); }, 
     function(){ $('.sub').removeClass('sub-active').addClass('sub-inactive'); }

謝謝！

來源

2011-10-19 arun nair

一個簡單的變化

$(document).ready(function(){ 
    $('.sub').parent().hover(
    function(){ $('.sub', this).removeClass('sub-inactive').addClass('sub-active'); }, 
    function(){ $('.sub', this).removeClass('sub-active').addClass('sub-inactive'); }, 
    ); 
});

當您使用toggleClass()，事情變得更加容易：

$(document).ready(function(){ 
    $('.sub').parent().hover(function() { 
    $('.sub', this).toggleClass('sub-inactive sub-active'); 
    }); 
});

反正它沒有什麼太大的意義有非活動狀態的額外的類。只是樣式.sub與不活動（默認）外觀和切換活動的.sub-active。

這是一個少擔心的類，元素永遠不會意外同時具有兩個狀態。

來源

2011-10-19 18:12:07 Tomalak

「this」實際是指父元素（在本例中是li link3），還是它指的是'sub'類給出的ul？我試過你的代碼，它隱藏了主菜單li（link3）在懸停時顯示... –

@arun：它總是指你已經附加了事件處理程序的元素。在你的情況下，'.sub'的父項。這就是爲什麼我使用'this'作爲事件處理程序中的jQuery操作的上下文。（再次嘗試我的代碼，也許你已經嘗試了第一個版本） – Tomalak

使用toggleClass()添加一個類，如果尚不存在，或者如果它存在，則刪除它。因爲邏輯是相同的，所以你可以只傳遞一個函數到hover。

$(document).ready(function(){ 
    var sub = $('.sub'); 
    sub.parent().hover(function(){ 
     sub.toggleClass('sub-inactive sub-active'); 
    }); 
});

docs here。

希望有幫助！乾杯。

來源

2011-10-19 18:12:03 keeganwatkins

我想我自己的代碼（在問題中），雖然效率不高，但實際上起作用。這個問題是一個額外的逗號在鼠標離開功能的懸停事件中結束 -

function(){ $('.sub').removeClass('sub-inactive').addClass('sub-active'); }, 
function(){ $('.sub').removeClass('sub-active').addClass('sub-inactive'); },

逗號在代碼第二行的末尾上面引起JS錯誤，和所有的同時，我想這個問題與我使用removeClass和addClass的方式。

感謝您幫助大家，我從上述兩個回答中瞭解到了一點。

來源

2011-10-19 18:31:23

但是'$（'。sub'）'會在整個頁面中選擇* all *這些元素 - 我懷疑你真的想要這樣做。 – Tomalak

我覺得基本上你要尋找的是這樣的事情...

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('.sub').parent().hover(function(){ 
     $(this).find('ul.sub').removeClass('sub-inactive').addClass('sub-active'); 
    }); 
    $('.sub').parent().mouseout(function(){ 
     $(this).find('ul.sub').removeClass('sub-active').addClass('sub-inactive'); 
    }); 
});

而且，你可能要檢查你的CSS。我不認爲設置顯示：！重要;實際上會做任何事情。實際上，使用上面的例子，你甚至不需要子類別類別，因爲子非活動類別被從元素中剝離，因此撤銷「display：none;」聲明。

來源

2011-10-19 18:33:24 thedestry

'$（'。sub'）''選擇器可以重複使用，就像'parent（）'的結果一樣，每次調用'hover（）'和'.mouseout（）'都可以處理。 – keeganwatkins

如何動態添加或刪除使用jquery附加到元素的類？

回答

相關問題