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"));

ДЕМО(осмотрите элемент, чтобы увидеть, что класс действительно добавлен и удален)

Answer 2

Ваш removeClass кажется не идеальным. Сделайте это, как показано ниже.

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

Answer 3

На динамически добавленном элементе вы должны использовать 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;
    });