使用 Javascript 按类别隐藏项目

Question

我有一个世界各地的城市列表。我想创建一个下拉过滤器，根据他们的大陆对位置进行排序。这是过滤器的php部分

...
<div>
    <label for="filt_country">Show:</label>
    <select id="filt_country">
        <option value="0" selected="selected">All Countries</option>
        <option value="1">Restuarant Locations</option>
        <optgroup label="Meetings By County ">
            <option value="2">Africa</option>
            <option value="3">Antartica</option>
            <option value="4">Asia</option>
            <option value="5">Europe</option>
            <option value="6">NAmerica</option>
            <option value="7">SAmerica</option>
        </optgroup>
    </select>
</div>

<article class="location">
  <div class="body_location Europe Twenty">
    <p class="location_city">
      <span class="capital">Tbilisi</span>
      <span class="Country">Georgia</span>
    </p>
    <div class="country_descr">
      <h3 class="country_anthem">Tavisupleba</h3>
      <p><strong>Writer: </strong>David Magradze</p>
      <p><strong>Music: </strong>Zachary Paliashvili/Ioseb Kechakmadze</p>
      <p></p>
  </div>
</article>
...

这是根据国家/地区显示或隐藏元素的 Javascript

<script>
  $(document).ready(function(){
      $('#country-filter').on('change', function() {
        if ( this.value == '0') {
            $(".Africa").show();
            $(".Antartica").show();
            $(".Asia").show();
            $(".Europe").show();
            $(".NAmerica").show();
            $(".Oceania").show();
            $(".SAmerica").show();
        }
        else ( this.value == '2') {
            $(".Africa").show();
            $(".Antartica").hide();
            $(".Asia").hide();
            $(".Europe").hide();
            $(".NAmerica").hide();
            $(".Oceania").hide();
            $(".SAmerica").hide();
        }
        else ( this.value == '3') {
            $(".Africa").show();
            $(".Antartica").hide();
            $(".Asia").hide();
            $(".Europe").hide();
            $(".NAmerica").hide();
            $(".Oceania").hide();
            $(".SAmerica").hide();
        }
        .
        .
        .
      });
  });
</script>

问题是我的过滤器列表可能会增加，我不想在每次添加过滤器选项时都重新输入show 和hide 过滤器。有没有办法确保当我选择Europe 时，仅显示class 中包含欧洲的国家/地区，而隐藏其他任何内容？还是我必须每次都复制粘贴if ... else 语句？我现在知道它只有 7 项，但最多可以有 50 项。

Answer 1

您可以创建一个像字典一样的大洲对象。然后显示所有.body-locations。然后，隐藏任何不是所选大陆的内容。

$(document).ready(function() {
    var continents = {
        1: 'Africa',
        2: 'Asia',
        ... // Add continents as necessary
    };

    $('#country-filter').on('change', function() {
        // Show all of your locations
        $('.body_location').show();

        // If this.value == 0, we want to show everything.
        if (this.value > 0) {
            // Hide anything that isn't the selected continent.
            $('.body_location:not(.' + continents[this.value] + ')').hide();
        }
    });
});

Answer 2

这是一个无需更改您的 html 的示例

$('#country-filter').on('change', function() {
    var filter_class = '.' + $('#country-filter option:selected').text();
    $(filter_class).show();
    $('.body_location:not(' + filter_class + ')').hide();
});

Answer 3

您可以从很多代码重用中受益。

对于初学者，您可能想要创建一个方法，例如：

showCountriesFromContinent(continent){
  //hide all countries
  $('.country').hide();
  //show only the one you want.
  $(continent).show();
}

这假设您正在向所有国家/地区添加一个 .country 类，除了特定的大陆类。

您最终可能会拥有此类对象（我同意这可能不是最佳解决方案，但我没有您的应用程序的其余上下文）：

continents: {
   "1": ".Africa",
   "2": ".Asia",
   "3": ".America"
   ...
}

那么生成的代码可能如下所示：

showCountriesFromContinent(continent){
  if(continent == '0')
      $('.country').show();
  else {
      //hide all
      $('.country').hide();
      //show only the one you want.
      $(continents[continent]).show();
  }
}

这允许您在一个地方添加大陆/县/任何地方。

Answer 4

$("article.location").hide();
$("#filt_country").on("change", function() {
    If($(this).val()==0) {
         $("article.location").show();
         return false;
    }
    var getText = $("#filt_country option:selected").text();
    $("article.location").hide();
    $("article.location > ."+getText).parent().show();
});

这肯定对你有帮助。

Answer 5

怎么样：

http://api.jquery.com/toggle/#toggle-display

$('#country-filter').on('change', function() {        
            $(".Africa").toggle(this.value === '0');
            $(".Antartica").toggle(this.value === '1');
            $(".Asia").toggle(this.value === '2');
            $(".Europe").toggle(this.value === '3');
            $(".NAmerica").toggle(this.value === '4');
            $(".Oceania").toggle(this.value === '5');
            $(".SAmerica").toggle(this.value === '6');
//...
        }