0

我怎样才能在每个页面上只加载第二类的项目（data-color="Blue"）而不是所有项目？

JSFiddle 链接：http: //jsfiddle.net/Cr2cY/

jQuery：

$(document).ready(function () {
$('#filterOptions li a').click(function () {
    // fetch the class of the clicked item
    var ourDataAttr = $(this).data('color');
    // reset the active class on all the buttons
    $('#filterOptions li').removeClass('active');
    // update the active state on our clicked button
    $(this).parent().addClass('active');
    if (ourDataAttr == 'All') {
        // show all our items
        $('#content').find('.item').show();
    } else {
        // hide all elements that don't share ourClass
        $('#content').find('.item:not([data-color="' + ourDataAttr + '"])').hide();
        // show all elements that do share ourClass
        $('#content').find('.item[data-color="' + ourDataAttr + '"]').show();
    }
    return false;
});

});

html

<div id="container">
<ul id="filterOptions">
    <li class="active"><a href="#" class="All" data-color="All">All</a></li>
    <li><a href="#" class="Blue" data-color="Blue">Blue</a></li>
    <li><a href="#" class="Red" data-color="Red">Red</a></li>
    <li><a href="#" class="Black" data-color="Black">Black</a></li>
    <li><a href="#" class="White" data-color="White">White</a></li>
</ul>
<div id="content">
    <ul>
        <li class="item Blue" data-color="Blue">Blue 1</li>
        <li class="item Blue" data-color="Blue">Blue 2</li>
        <li class="item Red" data-color="Red">Red 1</li>
        <li class="item Red" data-color="Red">Red 2</li>
        <li class="item Black" data-color="Black">Black 1</li>
        <li class="item Black" data-color="Black">Black 2</li>
        <li class="item White" data-color="White">White 1</li>
        <li class="item White" data-color="White">White 2</li>
    </ul>
</div>

4

3 回答 3

2

您应该为您的默认项目执行click()[jQuery]$(document).ready：

$('#filterOptions a.Blue').click();

这会触发该项目的单击事件，在这种情况下隐藏除蓝色项目之外的所有项目，就好像用户单击了它一样。这是一个演示。

于 2013-11-13T15:49:06.877 回答
1

这将是最快的方法：

$(".Blue").click();

http://jsfiddle.net/Cr2cY/6/

于 2013-11-13T15:48:45.600 回答
0

如果我正确理解您的问题，您只想在页面加载时显示蓝色项目而不是全部。如果是这样，请在下面尝试。

小提琴：http: //jsfiddle.net/Purus/Cr2cY/8/

$(document).ready(function () {
 $('#content').find('.item:not([data-color="Blue"])').hide();

 $('#filterOptions li a').click(function () {
    // fetch the class of the clicked item
    var ourDataAttr = $(this).data('color');
    // reset the active class on all the buttons
    $('#filterOptions li').removeClass('active');
    // update the active state on our clicked button
    $(this).parent().addClass('active');
    if (ourDataAttr == 'All') {
        // show all our items
        $('#content').find('.item').show();
    } else {
        // hide all elements that don't share ourClass
        $('#content').find('.item:not([data-color="' + ourDataAttr + '"])').hide();
        // show all elements that do share ourClass
        $('#content').find('.item[data-color="' + ourDataAttr + '"]').show();
    }
    return false;
});

});

于 2013-11-13T15:54:25.073 回答