Скрыть элементы по классам с помощью 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-location s. Затем спрячьте все, что не является выбранным континентом.

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

Как насчет:

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

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

$("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(); 
}); 

Это могло бы быть полезно для вас.