addClass/removeClass 基于所选项目数据属性
addClass/removeClass based on selected items data attribute
我有点卡在这里。我有一个ul
链接菜单。当用户从此列表中选择时,我正在使用 ajax 从另一个页面调用内容。我想从选定的锚点中获取一个数据属性(data-flag
),并将该属性作为类添加到保存 ajax 内容 ( #fourteen
的div 中。添加类部分工作正常。但是,当从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>
你只需要像这样删除元素中的所有类:
// remove all class
jQuery('#fourteen').removeClass();
// then add class name with data flag selected anchor only
jQuery('#fourteen').addClass($(this).attr("data-flag"));
DEMO(检查元素以查看实际添加和删除的类)
你的removeClass
似乎并不完美。像下面这样做。
jQuery('#fourteen').removeClass();
在动态添加的元素上,您必须使用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;
});
相关文章:
- 序列化数据属性中对象的最可靠方法
- jQuery最近父级的数据属性选择器
- delete在Object上效率低下,但在DOM Element's的数据属性,与null out相比
- 数据属性仅在切换设备模式下工作
- 函数jquery.html()不提供数据属性集值
- 在数据属性上进行下拉自动选择
- JavaScript-获取数据属性的值返回未定义的值
- 如何替换数据属性中的特定字符串单词
- 使用数据属性将HTML数据复制到另一个元素
- 带有CSS的数据属性就没那么有用了
- 查找所有TD标签并读取其数据属性
- 谷歌图表堆叠柱状图.如何设置每个单独堆叠项目(数据系列)的样式
- 使用jQuery获取第N个元素的数据属性值
- 使用自定义数据属性或将数据绑定到处理程序来处理事件
- 数据属性有没有更干净的方法
- 是否可以使用CSS分配数据属性
- 根据jquery数据属性值进行查询
- 按数据属性查找和删除项目
- addClass/removeClass 基于所选项目数据属性
- ASP.NET中项目符号列表的数据属性