javascript - 使用自定义按钮过滤结果

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

基于您提供的复选框示例，我刚刚更新了代码，改为使用您在所选元素上切换的类，从而允许您根据需要设置它们的样式。

参见 fiddle 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>