addClass/removeClass根據選定的項目數據屬性

Question

我有點卡在這裏。我有一個ul菜單的鏈接。當用戶從這個列表中選擇，我用ajax從另一個頁面調用內容。我想從選定的錨點獲取數據屬性（data-flag），並將該屬性作爲類添加到保存ajax內容的div（#fourteen）。添加的類部分工作正常。但是，當從ul菜單中選擇一個新項目時，我似乎無法從內容div中刪除其他類。隨着每次點擊，它只是添加更多的類。

這是我的代碼。

<ul id="langtest" class="tp_lang2"> 
<li><a href="http://myurl.com/14-languages" data-flag="us" data-lang="English">English</a></li> 
<li><a href="http://myurl.com/zh/14-languages" data-flag="cn" data-lang="Chinese (Simplified)">中文(簡體)</a></li> 
<li><a href="http://myurl.com/nl/14-languages" data-flag="nl" data-lang="Dutch">Nederlands</a></li> 
<li><a href="http://myurl.com/fr/14-languages" data-flag="fr" data-lang="French">Français</a></li> 
</ul> 

<div id="fourteen" class="cn"> 
<div id="content"> 
    <div class="main-content">Content being served up here. 
    </div> 
</div> 
</div> 

    <script> 

    jQuery("ul#langtest li a").click(function() { 

     jQuery('#fourteen').load($(this).attr("href") + " #content"); 
     jQuery('#fourteen').removeClass.not(this).attr("data-flag"); 
     jQuery('#fourteen').addClass($(this).attr("data-flag")); 
     return false; 
     }); 

    </script> 

Answer 1

你只需要刪除所有類中的元素，像這樣：

// remove all class 
jQuery('#fourteen').removeClass(); 
// then add class name with data flag selected anchor only 
jQuery('#fourteen').addClass($(this).attr("data-flag")); 

DEMO（檢查元素，查看類實際添加&刪除）

Answer 2

在動態添加的元素，你必須使用delegateevent結合。

jQuery(document).on("click","ul#langtest li a",function() { 

    jQuery('#fourteen').load($(this).attr("href") + " #content"); 
    //also change your removeClass code 
    jQuery('#fourteen').removeClass(); 
    jQuery('#fourteen').addClass($(this).attr("data-flag")); 
    return false; 
    }); 

Answer 3

你removeClass似乎不完善。像下面這樣做。

jQuery('#fourteen').removeClass();