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

data()データ属性を処理するメソッドを使用した、より簡潔で最新のjQueryの方法は次のとおりです。

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

これもJSFiddleで、実際の動作を確認できます。

Answer 3

の線に沿った何か？

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