Фильтруйте Divs по классу, используя либо URL, либо список выбора - PullRequest
Новая
       29

Фильтруйте Divs по классу, используя либо URL, либо список выбора

0 голосов
/ 13 марта 2019

У меня есть страница, которая показывает много элементов div, и мне нужно иметь возможность фильтровать их либо по строке запроса url, а также по 2 входам списка выбора.

У меня это работает, где он будет добавлять? Dc = classnamehere, который затем показывает только div с этим классом - jquery для этого ниже: 

<script type="text/javascript">
    // Parse the URL parameter
    function getParameterByName(name, url) {
        if (!url) url = window.location.href;
        name = name.replace(/[\[\]]/g, "\\$&");
        var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
            results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, " "));
    }
    // Give the parameter a variable name
    var dynamicContent = getParameterByName('dc');
 
     $(document).ready(function() {
 
        // Check if the URL parameter is apples
        if (dynamicContent == 'westbury') {
            $('.westbury').show();
        } 
        // Check if the URL parameter is oranges
        else if (dynamicContent == 'clifton') {
            $('.clifton').show();
        } 

        // Check if the URL parmeter is empty or not defined, display default content
        else {
            $('.listing-item').show();
        }
    });
</script>

Что мне также нужно, так это возможность показывать / скрывать эти одни и те же элементы в двух списках выбора, как показано ниже - оба предназначены для классов. 

                       <select id="area">
<option value="">Select Area</option>
    <option value="westbury">Westbury</option> 
    <option value="clifton">Clifton</option>
</select>
<select id="category">
    <option value="">Select Category</option>
    <option value="cafe">cafe</option>
    <option value="shop">shop</option>  
</select>

Так что, в основном, если я захожу на страницу и она имеет URL-адрес? Dc = classhere, мне будут показаны результаты для этого класса - тогда, если я выберу фильтр через список выбора, он сможет затем переопределить и показать / скрыть div на основе что.

Если ничего не выделено или не показано в URL, тогда все может быть показано.

Заранее спасибо!

...