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 =“普通人”或类=“普通女人”等添加到我的李的

最后，我添加了触发这些内容的链接：

    <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-class或.common时，您就有li.common。

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

尝试使用jQuery过滤无序列表

2 个答案: