javascript - 具有可变内容的 jQuery 选择器

Question

我写了一小段 jQuery，主要用于过滤内容。当用户单击按钮(在本例中为 LI 元素)时，特定内容的可见性会“切换”。

$( "li:contains('Blog')" ).click(function() { // If a user clicks the "Blog" button
  $( ".Blog" ).toggle('slow') // Hide/Show all blog entries
});

这很好用，但并非所有条目都将成为博客 - 它是完全动态的。所以我需要一些类似的东西:

$( "li:contains('XYZ')" ).click(function() { // If a user clicks this button
  $( ".XYZ" ).toggle('slow') // Hide/Show all entries belonging to that button
});

本质上，如果有更好的写法:

$( "li:contains('Blog')" ).click(function() {
  $( ".Blog" ).toggle('slow')
  $(this).toggleClass( "secondary" )
});

$( "li:contains('Twitter')" ).click(function() {
  $( ".Twitter" ).toggle('slow')
  $(this).toggleClass( "secondary" )
});

$( "li:contains('Facebpok')" ).click(function() {
  $( ".Facebook" ).toggle('slow')
  $(this).toggleClass( "secondary" )
});

HTML

<ul class="button-group filter-button-group">
    <li class="button tiny">Blog </li>
    <li class="button tiny">Twitter </li>
    <li class="button tiny">Facebook </li>
</ul>

当前代码笔:http://codepen.io/anon/pen/RPZaNN

Answer 1

试试这个例子:

$( "li" ).click(function() {
          var elem=$(this);
          var txt=elem.html();
          $( "."+txt).toggle('slow');
          $(this).toggleClass( "secondary" )
});