Скрыть предметы по классу, используя 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

$("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 4

Ну, есть много повторного использования кода, которые вы могли бы извлечь выгоду.

Для начала вы можете создать такой метод, как:

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 5

Как насчет:

http://api.jquery.com/toggle/

$('#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');
//...
        }