尝试使用jQuery筛选无序列表

Question

我认为我走在正确的道路上，但是我无法使它正常工作。

我正在使用内联javascript调用

<script type="text/javascript">
$( 'a.sort' ).on( 'click', function( e ) {
e.preventDefault();
toSort = $( this ).data( 'type' );
$( '.common-li-class' ).not( toSort ).hide();
} );
</script>

然后将class =“ common man”或class =“ common woman”等添加到我的li的

最后，我添加了以下链接来触发这些链接：

    <a class="sort" data-type="man" href="#">Men</a>
    <a class="sort" data-type="woman" href="#">Women</a>

但是它似乎没有任何作用。

Answer 1

您使用的脚本会将选择器评估为$('.common-li-class').not('man').hide(); 但是根据您给man的html参考，它是一个类，因此我们必须在它前面加上点号，以使该选择器有效。

尝试，

$('.common-li-class').not('.' + toSort).hide();

Answer 2

浏览jsfiddle（ http://jsfiddle.net/3LAHJ ）时，似乎选择了错误的选择器来选择要过滤的列表项。 当您只需要.common或li.common时，便拥有.common-li-class 。

<script type="text/javascript">
$('a.sort').on('click', function(e) {
   e.preventDefault();
   toSort = $( this).data('type');
   $('.common').not('.' + toSort).hide();
} );
</script>