addClass/removeClass на основе атрибута данных выбранных предметов

Question

Я немного застрял здесь. У меня есть меню ссылок ul. Когда пользователь выбирает из этого списка, я вызываю контент с другой страницы с помощью ajax. Я хочу захватить атрибут данных (data-flag) из выбранного якоря и добавить этот атрибут в качестве класса в div, который содержит содержимое ajax (#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();