显示/隐藏具有数据属性的动态内容 [英] Show/hide dynamic content with data attributes

问题描述

我正在努力实现

我的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)如何显示国家(地区)名称?

The JS code above builds a menu with Country Code - Q1) How can I display Country Name instead?

另外，切换-隐藏/显示功能无法正常工作-第二季度)有没有一种方法可以按国家/地区代码过滤/显示内容

Also the toggle - hide/show function isn't working properly- Q2) Is there a way how to filter/display the content by Country Code

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

请在此处查看我的JSfiddle: http://jsfiddle.net/oja417nq/2/

Please see my JSfiddle here: http://jsfiddle.net/oja417nq/2/

非常感谢...

推荐答案

问题1)如何显示国家名称?

我已将所有<​​c0>引用替换为countryname.

问题2)有没有一种方法可以按国家/地区代码过滤/显示内容?

您正在隐藏兄弟姐妹.我做了一个$().not()选择器，以隐藏那些与被单击项不匹配的选择器.

You were hiding siblings. I've made a $().not() selector to hide the ones that don't match with the clicked.

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

然后让我们做一个小的排序功能:

Let's do a small sort function then:

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]选择2个单词，然后执行$.sort().

We select only the 2 word with .text().split(' ')[1] and we do a $.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，您可能需要操纵列表并对其进行排序.但是我不确定你想要什么.

Regarding your question 3, you need probably to manipulate the list and make a sort function on it. But I'm not sure of what you desire.

这篇关于显示/隐藏具有数据属性的动态内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！