addClass/removeClass 基于所选项目的数据属性

Question

我有点卡在这里。我有一个 ul 链接菜单。当用户从此列表中进行选择时，我会使用 ajax 从另一个页面调出内容。我想从选定的锚点获取数据属性 (data-flag) 并将该属性作为 class 添加到包含 ajax 内容的 div (#fourteen).添加 class 部分工作正常。但是，当从 ul 菜单中选择一个新项目时，我似乎无法从内容 div 中删除其他 class。每点击一次，它只会添加更多 classes。

这是我的代码。

<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

在动态添加的元素上，您必须使用 delegate event 绑定。

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 2

您只需要像这样删除元素中的所有 class :

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

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

Answer 3

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

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

addClass/removeClass 基于所选项目的数据属性

addClass/removeClass based on selected items data attribute

html

javascript

jquery

attributes

removeclass