Question

私は時にユーザーがクリック画像を変更したいスプライトタブメニューを持っている、問題は、私はそれを正しく行う方法を見つけ出す傾けることで、これは私が持っているものです。

<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」の唯一の違いは、ユーザーが/

Answer 1

をクリックしたときに画像がハイライト表示される背景位置です。

パターンにうまく収まらないので、これは理想的ではありません。.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')で行うことができます。

Answer 2

ディミタール私はほとんどすべてに同意するが、私は、このアプローチが優れていると感じ：

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

基本的な違い？アクティブなクラスをテストする必要はなく、単にそれを切り替えます。

2ndはイベント委任を使用します。 1つのイベントを添付することはできません

3番目の表を自分のリストに追加する！イベントは、すでにそこに第四

少ないコードになりますし、私はこの長いったらしい記事は

を示唆するかもしれないものにもかかわらず、タイピング嫌い:)

コード差が、これは削除しないだけでJS

var cList = $$('#addCategoryList'); 
cList.addEvent('click:relay(li)', function(e,el){ 
    el.toggleClass('active'); 
});