使用addClass或addAttr添加類只是添加屬性名稱「class」

Question

我們編寫了一個自定義「展開/摺疊」功能來展開和摺疊HTML行。爲了識別展開的行，我們正在向展開的元素添加一個類 - 「展開」（沒有這個類的行被識別爲摺疊的行）。

在頁面加載時，將一組行添加到HTML表和我們的腳本運行標記爲「展開/摺疊」必要的元素，並添加必要的onClick函數。這一點工作正常，我們能夠根據需要展開和摺疊行。

<tr id="abc" data-dtoggle="collapse" data-dheader="true" data-dparent="tblXyz" class="expanded"> 
    <td>..</td> 
    .. 
</tr> 

單擊頁面上的按鈕時，會添加一組新行，替換現有行。我們的腳本再次運行以標記「展開/摺疊」行並添加onClick功能。但是這一次，雖然函數是根據需要添加的，但是在需要的地方不會添加類名，而只需添加「class」屬性名稱而不需要「expanded」值。

我們試圖用addAttr("class", "expanded")代替addClass("expanded")方法，但結果相同。

<tr id="abc" data-dtoggle="collapse" data-dheader="true" data-dparent="tblXyz" class> 
    <td>..</td> 
    .. 
</tr> 

是否讓我們知道您是否需要我們的代碼中的其他代碼片段。

在這方面的任何幫助將不勝感激。

Answer 1

要添加/刪除類，請使用classList.add()和classList.remove()。

正如document.getElementById('abc').classList.add('newclass')

您還可以，如果你想更輕鬆地開啓和關閉一類使用classList.toggle()。

通過嘗試手動設置類，如果您有多個類而只想添加或刪除其中一個類，則會遇到困難。

有關classList的信息，請參閱https://developer.mozilla.org/en-US/docs/Web/API/Element/classList。

Answer 2

addClass將完美工作，請找到下面的代碼片段。

addAttr請從你的頭腦

它只是attr刪除此語法。

$('#abc').attr("Class",",another_class"); 

基本區別是，addClass將追加類，其中爲attr將替換整個屬性。

例如

1.$('#abc').attr("Class","firstClass"); 
2.$('#abc').attr("Class","secondClass"); 

之後執行的代碼#abc這兩行會是這樣

After line-1. 
<tr id="abc" class="firstClass"> 
After line-2. 
<tr id="abc" class="secondClass"> 

但在addClass的情況下，它的不同之

$('#abc').addClass("firstClass"); 
$('#abc').addClass("secondClass"); 

執行完這兩行代碼後#abc就會這樣

After line-1. 
    <tr id="abc" class="firstClass"> 
After line-2. 
    <tr id="abc" class="firstClass secondClass"> 

希望它能幫助你!!

$('#abc').attr("Class",",another_class"); 
 
$('#abc').addClass('expanded'); 
 
setTimeout(function(){ 
 
alert($('#abc').attr('class')); 
 
},500);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
<tr id="abc" data-dtoggle="collapse" data-dheader="true" data-dparent="tblXyz" class="expanded"> 
 
    <td>Hello</td> 
 

 
</tr> 
 
    </table>