jquery - onclick 関数を削除し、jquery を介して同じ関数を使用して有効にする方法は?

Question

私は次のコードを持っています。私が達成しようとしているのは、1をクリックすると1のonclick機能を無効にする必要があり、残りは利用可能である必要があります.2をクリックすると、1と3にはonclick機能が必要ですが、2は必要ありませんそれ。

ページネーションのように達成する必要があります。どうすればできますか。

<div class="test">
  <a href="javascript:void(0);" onclick="test1(1);">1</a>
  <a href="javascript:void(0);" onclick="test1(2);">2</a>
  <a href="javascript:void(0);" onclick="test1(3);">3</a>
</div>

function test1(val)
  {
    $(this).attr('onclick','').unbind('click');
            alert("hai");
  }

しかし、私は毎回警告を受けています。

Answer 1

最後にクリックしたボタンの機能を無効にしたいと思います。あなたはこのようにすることができます：

<div class="test">
  <a href="javascript:void(0);" onclick="test1(1);">1</a>
  <a href="javascript:void(0);" onclick="test1(2);">2</a>
  <a href="javascript:void(0);" onclick="test1(3);">3</a>
</div>

Javascript

var lastClickedInt;
function test1(val)
  {
    if (val !== lastClickedInt) {
        lastClickedInt = val;
        alert("hai");
    }
  }

Answer 2

これを行う最善の方法は、クラスとイベント委任を使用することです。

<div class="test">
  <a href="javascript:void(0);" onclick="test1(1);">1</a>
  <a href="javascript:void(0);" onclick="test1(2);">2</a>
  <a href="javascript:void(0);" onclick="test1(3);">3</a>
</div>

$('div.test').on('click','a',function(e) {
  if(!$(this).hasClass('disabled')) {
    //you're event delegation code
  }

  //disable this link and "enable" it's siblings
  $(this).addClass('disabled').siblings().removeClass('disabled');
});