1

クリック時にイベントリスナーの追加/削除を切り替えたいと思います。誰かが私のコードを改善する方法を指摘できますか?

Stackoverflow で多くの回答を読みましたが、役に立たなかったものはありません。

表示された数字にポインターを合わせると、センターキューブが回転して同じ数字が表示される学習ツールです。

ページが読み込まれると、イベント リスナーが中央のキューブに追加されます。小さな jQuery を作成して、クリックされたキューブにリスナーを追加し、ポインターが置かれている数字も表示するようにしました。

Chrome で動作し、Opera で動作します。FF はサルバドール・ダリと IE だと思います...当たり前！

現時点での仕組み

ページの読み込み時に追加されるイベント リスナー

var thisCube = '.two';
var init = function() {
  var box = document.querySelector(thisCube).children[0],
      showPanelButtons = document.querySelectorAll('#hover-change li'),
      panelClassName = 'show-front',

      hover = function( event ){
        box.removeClassName( panelClassName );
        panelClassName = event.target.className;
        box.addClassName( panelClassName );
      };

  for (var i=0, len = showPanelButtons.length; i < len; i++) {
    showPanelButtons[i].addEventListener( 'mouseover', hover, false);
  }

};

window.addEventListener( 'DOMContentLoaded', init, false);

新しいリスナーを追加するjQuery

$('.one, .three, .four, .five, .six, .seven, .eight, .nine').click(function() { 
    thisCube = $(this).data('id');
    init();
});

イベントリスナーを正しく追加していないと確信しているため、他のソリューションについて読んだときに問題が発生しています。

関連するすべてのコードを投稿するという新しいルールにより、この投稿が大きくなりすぎるため、この投稿用に jsfiddle を作成しませんでした。jsfiddle で見たい人は、質問してください。

このデモに基づいて構築

- 編集 -

このコードを追加してクラスを追加しようとしましたrotateが、要素にそのクラスが既にある場合はrotate、イベントリスナーを削除して削除します。イベントリスナーは削除されません。

$('.one, .two, .three, .four, .five, .six, .seven, .eight, .nine').on('click', function() {

    if($(this).hasClass('rotate'))
    {
        $(this).removeClass('rotate');
        alert('remove ' + $(this).attr("class"));
        $(this).off('click');
    } else {
        $(this).addClass('rotate');
        alert('add ' + $(this).attr("class")); 
        thisCube = $(this).data('id');
        init();
    }
});

-- 私の解決策 --

$('.container').click(function(){
    $(this).toggleClass('rotate');
});

$('#hover-change').children().hover(function(){
    $('.rotate > #cube').removeClass();
    $('.rotate > #cube').addClass($(this).attr('class'));
},
function(){});
4

1 に答える 1

3

jQuery.onを使用してイベント リスナーを追加し、jQuery.offを使用してそれらを削除できます。

//Add
$('.one, .three, .four, .five, .six, .seven, .eight, .nine').on('click', function() { 
    thisCube = $(this).data('id');
    init();
});

// Remove
$('.one, .three, .four, .five, .six, .seven, .eight, .nine').off('click');

Event Namespace も使用できます。

//Add
    $('.one, .three, .four, .five, .six, .seven, .eight, .nine').on('click.MyNamespace', function() { 
        thisCube = $(this).data('id');
        init();
    });

// Remove
    $('.one, .three, .four, .five, .six, .seven, .eight, .nine').off('click.MyNamespace');

このようにして、他のハンドラーをいじることはありません..

それが役に立てば幸い...

于 2013-04-05T18:13:09.333 に答える