使用数据属性显示/隐藏动态内容

Question

我正在努力实现一个

我的html代码是：

<div id="menu"></div>

<ul class="countries">
<li data-country="country-1" data-countryname="France">Category France</li>
<li data-country="country-1" data-countryname="France">Category France</li>
<li data-country="country-1" data-countryname="France">Category France</li>
<li data-country="country-1" data-countryname="France">Category France</li>
<li data-country="country-1" data-countryname="France">Category France</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-2" data-countryname="UK">Category UK</li>
<li data-country="country-3" data-countryname="Germany">Category Germany</li>
</ul>

我的JS代码：

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

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

 $('#menu span').click(function () {
     var clicked = $(this).data('countrycode');
     $('li[data-country=' + clicked + ']').show(1000).siblings().hide(1000);
 });

上面的JS代码构建了一个带有国家代码-Q1的菜单)，我如何显示国家名称呢？

另外，切换-隐藏/显示功能不能正常工作- Q2)有一种方法可以按国家代码过滤/显示内容吗？

最后一个问题-- Q3) --是否可以在不使用任何数据属性的情况下按第二个单词按字母顺序排列所有的列表项？

请看我的JSfiddle：http://jsfiddle.net/oja417nq/2/

非常感谢。

Answer 1

Q1)如何显示国家名称？

我已经替换了所有countrycode对countryname的引用。

( Q2)有没有一种按国家代码过滤/显示内容的方法？

你在隐藏兄弟姐妹。我做了一个$().not()选择器来隐藏那些与点击的不匹配的选择器。

( Q3)是否可以在不使用任何数据属性的情况下按第二个单词按字母顺序排列所有列表项？

那么，让我们执行一个小的排序函数：

var $list = $(".countries");

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

我们只使用.text().split(' ')[1]选择两个单词，然后做一个$.sort()。

完整片段：

​

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>

​

关于您的问题3，您可能需要操作列表并对其进行排序功能。但我不确定你想要什么。

Answer 2

你能做到的

​

var countries = {};
$('.countries li[data-country]').each(function(i, el) {
  var country = $(el).data('country');
  if (!countries[country]) {
    countries[country] = {
      count: 0,
      name: $(el).data('countryname')
    };
  }
  countries[country].count++;
});

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

$('#menu span').click(function() {
  var clicked = $(this).data('countrycode');
  var $els = $('li[data-country=' + clicked + ']').show(1000);
  $('.countries > li').not($els).hide(1000);
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="menu"></div>
<ul class="countries">
  <li data-country="country-1" data-countryname="France">Category France</li>
  <li data-country="country-1" data-countryname="France">Category France</li>
  <li data-country="country-1" data-countryname="France">Category France</li>
  <li data-country="country-1" data-countryname="France">Category France</li>
  <li data-country="country-1" data-countryname="France">Category France</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-2" data-countryname="UK">Category UK</li>
  <li data-country="country-3" data-countryname="Germany">Category Germany</li>
</ul>

​