Javascript 基于选定项数据属性的addClass/removeClass

Javascript 基于选定项数据属性的addClass/removeClass,javascript,jquery,html,attributes,removeclass,Javascript,Jquery,Html,Attributes,Removeclass,我有点困在这里了。我有一个ul链接菜单。当用户从这个列表中选择时,我使用ajax调用另一个页面的内容。我想从所选锚点获取一个数据属性(数据标志),并将该属性作为类添加到保存ajax内容的div中(#十四)。添加类的工作正常。但是,当从ul菜单中选择一个新项目时,我似乎无法从content div中删除其他类。每次单击,它只会添加更多类 这是我的密码 <ul id="langtest" class="tp_lang2"> <li><a href="http://my

我有点困在这里了。我有一个
ul
链接菜单。当用户从这个列表中选择时,我使用ajax调用另一个页面的内容。我想从所选锚点获取一个数据属性(
数据标志
),并将该属性作为类添加到保存ajax内容的div中(
#十四
)。添加类的工作正常。但是,当从
ul
菜单中选择一个新项目时,我似乎无法从content 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>
满足于这里的服务。 jQuery(“ul#langtest li a”)。单击(函数(){ jQuery(“#十四”).load($(this.attr(“href”)+“#content”); jQuery(“#十四”).removeClass.not(this.attr(“数据标志”); jQuery(“#十四”).addClass($(this.attr(“数据标志”)); 返回false; });
在动态添加的元素上,您必须使用
委托
事件
绑定

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

只需删除元素中的所有类,如下所示:

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

(检查元素以查看实际添加和删除的类)

您的
removeClass
似乎并不完美。像下面这样做

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

谢谢阿齐姆,我用诺里哈兹梅的答案得到了这个答案。我也试过你的,但得到了同样的结果。它只添加了类,没有删除它们。不客气。对不起,误会了。不过,我已经更新了我的答案@克里斯