1

我有一个精灵选项卡菜单，我想在用户单击时更改图像，问题是我无法弄清楚如何正确地做到这一点，这就是我所拥有的：

<ul id="addCategoryList">
    <li  id='task' class="sprite-add-task-category-tasks menu-task "></li>
    <li  id='grades' class="sprite-add-task-category-tasks menu-grades-inactive">   </li>
    <li  id='results' class="sprite-add-task-category-tasks menu-results-inactive"></li>
    <li  id='other'  class="sprite-add-task-category-tasks menu-other-inactive"></li>
</ul>

这是javascript：

var getCategory = $('addCategoryList').getChildren();
getCategory.each(function(li){
    li.addEvent('click', function(){
        this.removeClass('menu-'+this.id+'-inactive').addClass('menu-'+this.id);
    });
});

问题是，当我单击它时，它会显示两个与被单击的类别相反的类别。我这样命名它们是因为它们都共享一个共同的精灵，并且“menu-id-inactive”和“menu-id”之间的唯一区别是背景位置，它使图像在用户单击时显示为突出显示/

4

2 回答 2

0

Dimitar 我几乎同意一切，但我觉得这种方法更好：

http://jsfiddle.net/z3nuq/2/

基本区别？无需测试类活动，只需切换它。

2nd 使用事件委托。附加一个事件而不是几十个

第三，随意将项目动态添加到您的列表中！事件已经存在

第四少代码，我讨厌打字，尽管这篇冗长的帖子可能会暗示什么

:)

代码差异仅在 JS 中

var cList = $$('#addCategoryList');
cList.addEvent('click:relay(li)', function(e,el){
    el.toggleClass('active');
});
于 2012-04-27T21:32:23.067 回答
0

这并不理想，因为它不能很好地呈现模式。你真的想扭转它，.addClass('active')而不是带走一个非通用的非活动类。

如果你的非活动类是通用的，它仍然可以工作。就目前而言，您需要保持活动状态，并且在交换新活动上的类之前，您需要先撤消旧活动。

http://jsfiddle.net/dimitar/z3nuq/

<ul id="addCategoryList">
    <li  id='task' class="sprite-add-task-category-tasks menu-task active">one</li>
    <li  id='grades' class="sprite-add-task-category-tasks menu-grades">two</li>
    <li  id='results' class="sprite-add-task-category-tasks menu-results">three</li>
    <li  id='other'  class="sprite-add-task-category-tasks menu-other">four</li>
</ul>

然后声明：

(function() {
    var cList = $('addCategoryList'),
        active = cList.getElement('li.active');

    cList.getElements('li').each(function(li){
        li.addEvent('click', function(){
            active && active.removeClass('active')
            active = this.addClass('active');
        });
    });

})();

虽然严格来说 - 在cList.getElements('.active').removeClass('active')将活动类添加到单击的 el 之前，您只需单击即可。

于 2012-04-26T08:42:49.190 回答