使用自定義按鈕來篩選結果

Question

我正在嘗試創建一個菜單，該菜單可以根據我製作的自定義按鈕（這只是可點擊的文本）來篩選結果。有誰知道一種創建帶有自定義按鈕而不是複選框的過濾結果菜單的方法嗎？任何幫助將是驚人的！

我發現濾波結果的這個例子中使用的複選框：

JSfiddle of filter results using check-boxes

舉個例子，我包括我自己的按鈕進入複選框例子的格式。

<script> 
 
var Lst; 
 
function changecolor(obj) { 
 
    if (Lst) Lst.style.color = "#663399"; 
 
    obj.style.color = "red"; 
 
    Lst = obj; 
 
} 
 
</script>

body { 
 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
    font-size: 11px; 
 
    line-height: 14px; 
 
} 
 
a:link { 
 
    text-decoration: none; 
 
    color: #000000; 
 
} 
 
a:visited { 
 
    color: #000000; 
 
    text-decoration: none; 
 
} 
 
a:hover { 
 
    text-decoration: none; 
 
    color: #0724fb; 
 
} 
 
a:active { 
 
    text-decoration: none; 
 
    color: #000000; 
 
} 
 
li { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<a href="#" onclick="changecolor(this)"> 
 
    <li>1 bedroom</li> 
 
</a> 
 

 
<a href="#" onclick="changecolor(this)"> 
 
    <li>2 bedrooms</li> 
 
</a> 
 

 
<a href="#" onclick="changecolor(this)"> 
 
    <li>3 bedrooms</li> 
 
</a> 
 
<br> 
 

 
<a href="#" onclick="changecolor(this)"> 
 
    <li>london</li> 
 
</a> 
 

 
<a href="#" onclick="changecolor(this)"> 
 
    <li>new york</li> 
 
</a> 
 

 
<a href="#" onclick="changecolor(this)"> 
 
    <li>paris</li> 
 
</a> 
 
<br> 
 

 
<ul> 
 
    1 bedroom apartment paris 
 
    <br>1 bedroom apartment 
 
    <br>3 bedroom apartment london 
 
    <br>2 bedroom apartment new york 
 
    <br>2 bedroom apartment paris 
 
    <br>2 bedroom apartment london 
 
    <br>3 bedroom apartment new york 
 
    <br>1 bedroom apartment london 
 
    <br>2 bedroom apartment new york 
 
</ul>

Answer 1

根據您所提供的複選框例子，我剛剛更新的代碼，改爲使用您所選擇的項目切換類，從而使你的風格他們爲你請。

見小提琴http://jsfiddle.net/bdum8euw/1/

$('section').click(function(e) { 

    var room_array = new Array(), 
     loc_array = new Array(); 
    $('.br').each(function() { 

     if (this == e.target) { 
       $(this).toggleClass('is-checked'); 
       //console.log(e.target); 
     } 

     if ($(this).hasClass('is-checked')) { 
      room_array.push($(this).data('bedrooms')); 
     } 
    }); 

    $('.loc').each(function() { 
     if (this == e.target) { 
      $(this).toggleClass('is-checked'); 
     } 

     if ($(this).hasClass('is-checked')) { 
      loc_array.push($(this).data('location')); 
     } 
    }); 

    $('li').each(function() { 

     if (($.inArray($(this).data('location'), loc_array) > -1 || !$('.loc.is-checked').length) && ($.inArray($(this).data('bedrooms'), room_array) > -1 || !$('.br.is-checked').length)) { 
      $(this).show(); 
     } else { 
      $(this).hide(); 
     } 
    }); 
}); 

<section> 
    <a data-bedrooms="1" class="br" type="checkbox">1 bedroom</a> 
    <a data-bedrooms="2" class="br" type="checkbox">2 bedrooms</a> 
    <a data-bedrooms="3" class="br" type="checkbox">3 bedrooms</a><br> 

    <a data-location="london" class="loc" type="checkbox">london</a> 
    <a data-location="new-york" class="loc" type="checkbox">new york</a> 
    <a data-location="paris" class="loc" type="checkbox">paris</a> 
</section> 

<ul> 
    <li data-bedrooms="1" data-location="paris">1 bedroom apartment paris</li> 
    <li data-bedrooms="1" data-location="paris">1 bedroom apartment</li> 
    <li data-bedrooms="3" data-location="london">3 bedroom apartment london</li> 
    <li data-bedrooms="2" data-location="new-york">2 bedroom apartment new york</li> 
    <li data-bedrooms="2" data-location="paris">2 bedroom apartment paris</li> 
    <li data-bedrooms="2" data-location="london">2 bedroom apartment london</li> 
    <li data-bedrooms="3" data-location="new-york">3 bedroom apartment new yourk</li> 
    <li data-bedrooms="1" data-location="london">1 bedroom apartment london</li> 
    <li data-bedrooms="2" data-location="new-york">2 bedroom apartment new yor</li> 
</ul>