我有一个菜单栏,其中包含反映操作类别的顶级菜单项,可以对可见数据进行排序或过滤操作:
<ul class="menu-bar">
<li class="top-menu-item"><a class="clear-filter">Clear</a></li>
<li class="top-menu-item"><a><span class="category Category1">Category1</span></a>
<ul>
<li><a>FilterAction</a></li>
<li><a>SortAction</a></li>
</ul>
<li class="top-menu-item"><a><span class="category Category2">Category2</span></a>
...
</ul>
当用户选择排序或过滤操作时,我的脚本当前将使用操作名称替换相应范围中的文本,并在跨度中添加适当的类以指定选择,以便在选择{{ 1}}在FilterAction
菜单中,跨度将如下所示:
Category1
如果您选择了<span class="category Category1 set-filter">FilterAction</span>
,则可以将范围设置为
SortAction
如果你同时选择了两个:
<span class="category Category1 set-sort">SortAction</span>
首先列出排序操作。
任何时候一次只能有一个排序操作,但一次过滤器的数量没有限制。
要更改排序,因为一次只能有一个排序,非常简单 - 当我设置新排序时,我会查看现有的<span class="category Category1 set-filter set-sort">SortAction, FilterAction</span>
类,删除{{1 }}然后将文本替换为保留为set-sort
(上面的set-sort
)的类的原始类别,或者删除逗号之前的所有文本(包括),以便仅过滤文本仍然存在。这没有问题。
现在,删除过滤器的唯一方法是点击span
链接,该链接应替换所有Category1
个Clear
类的原始类别名称或者现有的排序行动。
我遇到的麻烦是能够一次性选择span
的所有跨度,然后循环以相应地更改文本和类。我目前有coffeescript代码执行此操作:
set-filter
现在这显然不起作用,它只会对所有选定的跨度执行全面操作,而不是单独循环每个跨度。我最初尝试这样做:
sort-filter
但后来我无法访问跨度的关键属性,如文本。
进行这种骑行操作的正确方法是什么?
答案 0 :(得分:1)
我不确定你想要做的所有事情......但是这个循环会让你循环遍历每个设置排序范围并将文本应用于范围,或者做你想做的任何事情。
$('span.set-sort').each(function () {
var $this = $(this);
$this.text('Whatever you want').addClass('hello').removeClass('world');
});