Question

我有一些我喜欢的简单过滤，但我试图开始使用预选之一。＆＃34;所有＆＃34;目前是默认选择，但我试图得到＆＃34; Black＆＃34;已被选中。无法正确行事。这是工作版本;小提琴链接。

标记：

<ul id="options">
  <li><a href="">All</a></li>
  <li><a href="">Black</a></li>
  <li><a href="">Green</a></li>
</ul>

<section id="types">
  <div class="black"></div>
  <div class="black"></div>
  <div class="green"></div>
  <div class="black"></div>
  <div class="green"></div>
  <div class="green"></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="green"></div>
  <div class="black"></div>
  <div class="green"></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="black"></div>
  <div class="green"></div>
  <div class="green"></div>
  <div class="black"></div>
  <div class="green"></div>
  <div class="black"></div>
</section>

CSS：

a:link, a:visited, a:active {
color: #ccc;
outline: none;
text-decoration: none;
}

ul#options {
margin: 40px auto 30px;
width: 300px;
}

a:hover, ul#options li a.active {
color: #000;
}

ul#options li {
font-size: 25px;
margin-right: 25px;
display: inline;
}

div {
float: left;
height: 50px;
margin: 1px;
width: 50px;
}

.black {
background: #000;
}

.green {
background: green;
}

JS：

$(document).ready(function() {

// The filtering functionality    
    $('ul#options a').click(function() {
        var filterVal = $(this).text().toLowerCase().replace(' ','-');
        var itemsLength = $('#types div:visible').length;
        $('#types div:visible').each(function(i) {
        $(this).fadeOut(30, function(){if(itemsLength == ++i){show(filterVal);}});
        });
        return false;
        });

    function show(filterVal){
        if(filterVal == 'all') {
        $('#types div').fadeIn(200);
        } else {
            $('#types div').each(function() {
            if($(this).hasClass(filterVal)) {
            $(this).fadeIn(200);
            }
            });
        }
    }

// Adds/removes 'active' class to selected item
    $('ul#options a').first().addClass("active"); // Adds the 'active' class to the first anchor    
    $("ul#options a").click(function(){
        $(".active").removeClass("active");
         $(this).addClass("active");
      });

});

FIDDLE： http://jsfiddle.net/nf2gh/3/

我该怎么办？

Answer 1

尝试调用包含黑色作为其文本的锚标记的click事件，手动为

$('a:contains("Black")').click();

或

$('a:contains("Black")').trigger('click');

DEMO

请在此阅读以了解有关.trigger()和.click()

的更多信息

Answer 2

我不确定我是否得到了你的要求，但如果是，你可以补充：

$('ul#options a').eq(1).click();

然后，黑色将是默认值。

New fiddle

具有预选项的jQuery过滤器

2 个答案:

DEMO