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);
    });
});

問題は、クリックすると、クリックされたカテゴリだけでなく、アクティブなカテゴリが 2 つ表示されることです。それらはすべて共通のスプライトを共有し、「menu-id-inactive」と「menu-id」の唯一の違いは、ユーザーがクリックしたときに画像が強調表示される背景位置であるため、そのように名前を付けました/

4

2 に答える 2

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 に答える
0

Dimitar 私はほとんどすべてに同意しますが、このアプローチの方が優れていると感じています。

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

基本的な違い？クラスがアクティブかどうかをテストする必要はありません。トグルするだけです。

2 つ目は、イベント委任を使用します。潜在的に数十ではなく、1 つのイベントを添付する

第 3 に、項目を動的にリストに追加してください。イベントはすでにそこにあります

4 分の 1 のコードであり、この長い記事が示唆しているにもかかわらず、私はタイピングが嫌いです。

:)

コードの違いはJSだけです

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