jQuery在數據過濾器上切換True或False

Question

我有一個圖像鏈接，我想用作切換按鈕。

<img id="myToggleButton" src="myToggle.jpg" />

And what I want it to toggle is this:

<ul id="listview" data-filter="true">

So, basically I need to change from data-filter="true" or data-filter="false" and so on.

如何使用JQuery使其正常工作？

Answer 1

$('#myToggleButton').click(function(){
   var $listview = $('#listview');
   $listview.attr('data-filter',
       $listview.attr('data-filter')=='false' ? 'true' : 'false'
   );
}); 

Answer 2

有什么類似的？

var $list = $('#listview');
$('#myToggleButton').click(function (event) {
  if($list.data('filter') == true) {
    $list.attr('data-filter', false);
  }else {
    $list.attr('data-filter', true);
  }
});

Answer 3

這是一種使用data()方法處理數據屬性的更簡潔現代的jQuery方法：

$('#myToggleButton').click(function (){
  var listview = $('#listview');
  listview.data('filter', !listview.data('filter'));
  listview.listview('refresh');
});​

這也是一個JSFiddle ，因此您可以在實際中看到它。