使用数据属性显示/隐藏动态内容，并显示所有结果

Question

我在Show/hide dynamic content with data attributes找到了这个片段

基于数据属性动态显示和隐藏div是一个方便的片段。

有人能建议一种方法将显示所有选项添加到菜单中吗？

​

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>');
}

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');
  $('li[data-countryname=' + clicked + ']').show(1000);
  $('li').not('[data-countryname=' + clicked + ']').hide(200);
});

#menu span {
  display: inline-block;
  margin-right: 20px;
}

<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>

​

Answer 1

将所有按钮追加到#menu，并在click()事件上显示所有li。

​

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>');
}

  $('#menu').append('<span id="showAll"> 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');
  $('li[data-countryname=' + clicked + ']').show(1000);
  $('li').not('[data-countryname=' + clicked + ']').hide(200);
});

$('#showAll').click(function() {
  $('li[data-countryname]').show(1000);
});

#menu span {
  display: inline-block;
  margin-right: 20px;
}

<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>

​

Answer 2

像这样的事情应该有效：

$('#show-all').click(function() {
  $('li[data-countryname]').show(1000);
});

Answer 3

​

var countries = {},
  country;
$('#menu').append('<span data-countrycode=""> All</span>');
$('.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>');
}

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 != '') {
    $('li[data-countryname=' + clicked + ']').show(1000);
    $('li').not('[data-countryname=' + clicked + ']').hide(200);
  }
  else {
    $('li').show(1000);
  }
});

#menu span {
  display: inline-block;
  margin-right: 20px;
}

<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>

​