基于data属性的动态内容显隐功能添加SHOW ALL选项方案咨询

嘿，这需求超实用！给现有代码加上「SHOW ALL」选项其实很简单，咱们只需要两步：给菜单加个专属选项，再扩展点击事件的逻辑就行。

修改步骤 #

1. 添加「SHOW ALL」菜单元素
   在生成完所有国家的菜单span后，直接往#menu里追加一个特殊的span，给它标记data-countrycode="all"来区分普通选项。

2. 扩展点击事件逻辑
   在原来的点击事件里加个判断：如果点击的是「SHOW ALL」，就把所有<li>都显示出来，否则按原来的逻辑只显示对应国家的内容。

修改后的完整代码 #

JavaScript #

var countries = {}, country; 
$('.countries li[data-country]').each(function(i, el) { 
  country = $(el).data('country'); 
  countryname = $(el).data('countryname'); 
  if (countries.hasOwnProperty(countryname)) { 
    countries[countryname] += 1; 
  } else { 
    countries[countryname] = 1; 
  } 
}); 

for (var key in countries) { 
  $('#menu').append('<span data-countrycode="' + key + '">' + key + ' (' + countries[key] + ')</span>'); 
}

// 追加SHOW ALL选项
$('#menu').append('<span data-countrycode="all">SHOW ALL</span>');

var $list = $(".countries"); 
$list.children().detach().sort(function(a, b) { 
  return $(a).text().split(' ')[1].localeCompare($(b).text().split(' ')[1]); 
}).appendTo($list); 

$('#menu span').click(function() { 
  var clicked = $(this).data('countrycode'); 
  if (clicked === 'all') {
    // 点击SHOW ALL时显示所有li
    $('li').show(1000);
  } else {
    // 原来的国家筛选逻辑
    $('li[data-countryname=' + clicked + ']').show(1000); 
    $('li').not('[data-countryname=' + clicked + ']').hide(200); 
  }
});

CSS #

#menu span { 
  display: inline-block; 
  margin-right: 20px;
  cursor: pointer; /* 加上鼠标指针样式，更像可点击的菜单 */
}

HTML #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<div id="menu"></div> 
<ul class="countries"> 
  <li data-country="country-2" data-countryname="UK">Category UK</li> 
  <li data-country="country-2" data-countryname="UK">Category UK</li> 
  <li data-country="country-2" data-countryname="UK">Category UK</li> 
  <li data-country="country-3" data-countryname="Germany">Category Germany</li> 
  <li data-country="country-1" data-countryname="France">Category Alpha</li> 
  <li data-country="country-1" data-countryname="France">Category Beta</li> 
  <li data-country="country-1" data-countryname="France">Category C</li> 
  <li data-country="country-1" data-countryname="France">Category D</li> 
  <li data-country="country-1" data-countryname="France">Category E</li> 
</ul>

另外我还给CSS加了个cursor: pointer，让菜单看起来更像可点击的元素，体验更好～

内容的提问来源于stack exchange，提问作者Savaş Zorlu