交替選項卡上的開/關點擊事件

Question

$('#filter').on('click', function(){ 
    $('#sort').off('click'); 
    console.log($(this)); 
}); 

$('#sort').on('click', function(){ 
    $('#filter').off('click'); 
    console.log($(this)) 
}); 

$('.close').on('click', function() { 
    console.log($(this)); 
    $('#sort').on('click'); 
    $('#filter').on('click'); 
}); 

爲什麼div .close如果它們具有相同的選擇器ID，則將on方法返回給上述div？

編輯：爲清楚起見，我想暫時刪除事件上取兩個元素的不點擊（#filter或#sort）。然後點擊'.close'將返回所述元素再次具有on方法。

Answer 1

的off()不工作的方式，你THI NK。它實際上刪除了事件處理函數（回調函數），而不僅僅是隱藏它們，所以你不能用一個簡單的on()來恢復它們，它們不會被off()之後的元素存儲，你必須再次添加它們。跟蹤是否添加事件處理程序並不容易，所以我提出了另一種方法。

var sort = true; 
var filter = true; 

$('#filter').on('click', function(){ 
    if (!filter) 
     return; 
    sort = false; 
    console.log($(this)); 
}); 

$('#sort').on('click', function(){ 
    if (!sort) 
     return; 
    filter = false; 
    console.log($(this)) 
}); 

$('.close').on('click', function() { 
    console.log($(this)); 
    sort = true; 
    filter = true; 
}); 

另一種方法使用toggle()並與on()和off()功能結合起來。嗯，我發現jQuery toggle()不是鬆散耦合到DOM元素，所以你不能這樣做。你必須創建自己的實現，例如像這樣：

function toggle(options) { 
    var currentValue = !!options.value; 
    return function (value){ 
     if (value === undefined) 
      value = !currentValue; 
     if (value != currentValue) 
      if (value) { 
       currentValue = true; 
       options.on(); 
      } 
      else { 
       currentValue = false; 
       options.off(); 
      } 
    }; 
} 

有了這個切換的實現代碼將出現以下內容：

var switches = { 
    sort: toggle({ 
     on: function(){ 
      $('#sort').on('click', function(){ 
       switches.filter(false); 
       console.log($(this)) 
      }); 
     }, 
     off: function(){ 
      $('#sort').off('click'); 
     } 
    }), 
    filter: toggle({ 
     on: function(){ 
      $('#filter').on('click', function(){ 
       switches.sort(false); 
       console.log($(this)); 
      }); 
     }, 
     off: function(){ 
      $('#filter').off('click'); 
     } 
    }) 
}; 

$('.close').on('click', function() { 
    console.log($(this)); 
    switches.sort(true); 
    switches.filter(true); 
}); 

switches.sort(true); 
switches.filter(true); 

Answer 2

你可以嘗試使用：

$('#filter:not(.off)').on('click', function(){ 
    $('#sort').addClass('off'); 
    console.log($(this)); 
}); 

$('#sort:not(.off)').on('click', function(){ 
    $('#filter').addClass('off'); 
    console.log($(this)) 
}); 

$('.close').on('click', function(){ 
    $('#sort').removeClass('off'); 
    $('#filter').removeClass('off'); 
    console.log($(this)); 
}); 

Answer 3

我假設在你的代碼塊...

$('.close').on('click', function() { 
    console.log($(this)); 
    $('#sort').on('click'); 
    $('#filter').on('click'); 
}); 

你想點擊#sort和#filter。要做到這樣，你需要做到以下幾點：

$('.close').on('click', function() { 
    console.log($(this)); 
    $('#sort').click(); 
    $('#filter').click(); 
}); 

即使如此，它可能會是更好的包裹住其他的事件處理程序的功能，並呼籲他們像這樣：

$('.close').on('click', function() { 
    console.log($(this)); 
    sortClickFunction(); 
    filterClickFunction(); 
}); 

Answer 4

這將做任何事情：$('#sort').on('click');

你需要調用：$('#sort').trigger('click');