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）如何显示国家/地区名称？

我已将所有countryname引用替换为$().not()。

Q2）有没有办法按国家/地区代码过滤/显示内容？

你隐藏着兄弟姐妹。我已经创建了一个

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

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

选择器来隐藏与点击的内容不匹配的选择器。

Q3）是否可以按字母顺序按第二个单词按顺序排列所有列表项而不使用任何数据属性？

让我们做一个小排序功能：

.text().split(' ')[1]

我们只选择$.sort()的2个字，然后我们选择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>

//'GetQuestions'
foreach($questions as $question)..

    echo $question;

    //'GetAnswers - for Question;
    foreach($answers as $answer)..

        echo $answer;

    //endAnswerLoop

//endQuestionLoop

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

Answer 2

你可以做到

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: