4

私はトグル機能を作ろうとしているので、リンクをクリックすると1つのことを行い、同じリンクをもう一度クリックすると別のことを行います。私の問題は、最新バージョンのJqueryを使用していて、toggle-eventが非推奨になっているように見えることです。

非推奨になる前に、これを使用しようとしていました。

$('#edit a').toggle(
     function(){
        editList();
    },
     function(){
        addList();
});

ドキュメントには、すでにクリックにバインドされていると記載されています。

4

5 に答える 5

6

マイクロjQueryプラグイン：

jQuery.fn.clickToggle = function(a,b) {
  var ab = [b,a];
  return this.on("click", function(){ ab[this._tog^=1].call(this); });
};


// USE LIKE:

$("button").clickToggle(function() {   
     console.log("AAA");
}, function() {
     console.log("BBB");
}); // Chain here other jQuery methods to your selector

ここで私の答えから引用https://stackoverflow.com/a/21520499/383904

状態/値を切り替える他の方法があります：

ライブデモ

var editAdd = [editList, addList],  // store your function names into array
    c = 0;                          // toggle counter

function editList(){                // define function
   alert('EDIT');
}
function addList(){                 // define function
   alert('ADD');
}

$('#edit a').click(function(e){  
  e.preventDefault();
  editAdd[c++%2]();                 // toggle array index and use as function
                                    // % = Modulo operator
});

ここで、モジュロ演算子の代わりに、次のようなビット単位のXOR演算子%を使用できます。
^[c^=1]

Array.reverse（）LIVEDEMOの
使用

var editAdd = [editList, addList];

function editList(){
   alert('EDIT');
}
function addList(){
   alert('ADD');
}

$('#edit a').click(function(e){  
  e.preventDefault();
  editAdd.reverse()[0]();
});

reverseは、クリックするたびに配列を反転します。必要なのは、0のインデックス値を取得[0]し、その関数名を実行することだけです[0]()。

于 2013-03-24T20:20:25.200 に答える
4

実行する必要があるのは、たとえばカスタムdata-switch属性を使用して、実行する関数を示す変数または属性を用意することだけです。

$('a').click(function(e){
    e.preventDefault();
    var that = $(this);
    switch (that.data('switch')){
        case 'a':
            // do something in situation 'a'
            console.log('Function one');
            that.data('switch','b');
            break;
        case 'b':
            // do something in situation 'b'
            console.log('Function two');
            that.data('switch','a');
            break;
    }
});

JSフィドルデモ。

于 2013-03-24T20:12:57.160 に答える
2

短くてきれい

var toggle = [addList, editList];
$('#edit a').click({
  var state = +$(this).data('toggle');
  toggle[state]();
  $(this).data('toggle',(1-state));
  return false;
});
于 2013-03-24T20:30:21.610 に答える
2

ここでこれに関する私の答えを参照してください

このソリューションは、呼び出されるたびに2つを交互に繰り返す2つの関数を構成するトグル関数を作成します。

var toggle = function (a, b) {
    var togg = false;
    return function () {
        // passes return value back to caller
        return (togg = !togg) ? a() : b();
    };
};

でそれを適用します

$('#btn').on('click', toggle (function (){
    return editList();
}, function (){
    return addList();
}));
于 2015-05-22T07:40:38.970 に答える
1

エレガントではありませんが、迅速な修正：

$('#edit a').click({
  if($(this).data('toggleState') == 1) {
    toggleState = 0;
    addList();
  }
  else {
    toggleState = 1;
    editList();
  }

  $(this).data('toggleState', toggleState);
  return false;
});
于 2013-03-24T20:12:40.583 に答える