javascript - 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

这是一个更简洁和现代的jQuery方式，使用该data()方法处理数据属性：

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

这也是一个JSFiddle，因此您可以看到它的实际效果。