Как скрыть или отобразить данные из массива при нажатии в WordPress с помощью Vanilla JavaScript

Вступление

При работе с веб-сайтом вам нужен способ быстрого отображения статических данных на основе взаимодействия с пользователем, например нажатия кнопки. В этом руководстве мы рассмотрим, как отображать данные в зависимости от того, что щелкнул пользователь.

Настройки WordPress

Прочтите этот раздел, если вы используете WordPress

Введите этот код в файл functions.php, обратите внимание, что файл «location.js» находится в папке «js», которая находится в папке «assets», а папка «assets» находится в корне папки вашей темы.

function real_estate_theme_files() {
  wp_enqueue_script( 'location.js', get_theme_file_uri('/assets/js/location.js'), NULL, '2.0', true );
}

Если вы не используете WordPress, вы можете включить файл JavaScript в HTML.

HTML

Ниже представлен HTML-код страницы.

<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 store-location-select" 
            style="border-right: 1px solid #e9e9e9">
            <div class="sidebar-item pt-5 pl-5">
                <div class="make-me-sticky pl-5">
                    <p class="text-muted"><small>Filters</small></p>
                    <form name="location_display_form">
                        <input 
                            type="radio" 
                            class="input-radio text-muted store_type" 
                            id="all" name="store_type"
                            value="all" checked>
                        <label class="pl-3" for="all">All</label><br>
                        <input 
                            type="radio" 
                            class="input-radio text-muted store_type" 
                            id="store" name="store_type"
                            value="store">
                        <label class="pl-3" for="store">Stores</label><br>
                        <input 
                            type="radio" 
                            class="input-radio text-muted store_type" 
                            id="delivery" name="store_type"
                            value="delivery">
                        <label class="pl-3" for="delivery">Delivery</label><br>
                        <input 
                            type="radio" 
                            class="input-radio text-muted store_type" 
                            id="restaurants" name="store_type"
                            value="restaurants">
                        <label class="pl-3" for="restaurants">Restaurants</label>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="content-section">
                <div id="location-number"></div>
                <div id="location-list">
                </div>
            </div>
        </div>
    </div>
</div>

Этот HTML-код состоит из формы, содержащей различные типы магазинов, по которым можно щелкнуть мышью. Он также содержит элементы HTML, которые будет заполнять JavaScript, «номер-расположение» – для количества найденных элементов и «список-местоположения» – для отображения самих элементов.

Раздел JavaScript

Массив

data = [
    {
        "name": "Farmest Inc",
        "address": "7060 Philmont Court Bedford Hills",
        "city": "NY 10507",
        "location_type": "store"
    },
    {
        "name": "Cradle Farm",
        "address": "64 Gainsway Court Cold Spring",
        "city": "NY 10516",
        "location_type": "store"
    },
    {
        "name": "Thrive Farm & Gardens",
        "address": "751 Heirloom St. Durhamville Rue laBoéti e",
        "city": "NY 13054",
        "location_type": "store"
    },
    {
        "name": "Culture Products",
        "address": "541 Kingwood Drive Rotterdam Junction",
        "city": "NY 12150",
        "location_type": "store"
    },
    {
        "name": "Greengill Farms",
        "address": "7411 Market Road West Kill",
        "city": "NY 12492",
        "location_type": "store"
    },
    {
        "name": "Johnson Botta Farms",
        "address": "8026 Whitemarsh Ave. Brooklyn",
        "city": "NY 11208",
        "location_type": "store"
    },
    {
        "name": "Verrifa Farms",
        "address": "205 Brickell Court Swan Lake",
        "city": "NY 12783",
        "location_type": "store"
    },
    {
        "name": "Garden Fresh",
        "address": "9283 Smoky Hollow St. New York",
        "city": "NY 10282",
        "location_type": "store"
    },
    {
        "name": "Clean Brothers Farms",
        "address": "487 Nut Swamp Ave. Staten Island",
        "city": "NY 10314",
        "location_type": "delivery"
    },
    {
        "name": "Farm With Us",
        "address": "37 Pin Oak St. Astoria",
        "city": "NY 11105",
        "location_type": "delivery"
    }
]

Массив содержит объекты, их ключи (имя, адрес, город, расположение) и их соответствующие значения.

Код JavaScript

if (document.forms["location_display_form"].elements["store_type"] !== undefined) {
    var selected_location = "";
    window.onload = function () {
        show_location("all");
    }
    
    var radios = document.forms["location_display_form"].elements["store_type"];
    
    for(var i = 0, max = radios.length; i < max; i++) {
        radios[i].onclick = function() {
            show_location(this.value);
        }
    }
    
    function show_location(selected_location = null) {
        var filtered_data = data;
    
        if (selected_location !== "all") {
            filtered_data = data.filter((obj, index, arr) => {
                return obj.location_type == selected_location
            });
        }
    
        document.getElementById("location-list").innerHTML = "";
        document.getElementById("location-number").innerHTML = '';
    
        for (let index = 0; index < filtered_data.length; index++) {
    
            var name = filtered_data[index].name;
            var address = filtered_data[index].address;
            var city = filtered_data[index].city;
            var location_type = filtered_data[index].location_type;
    
            var badge = document.createElement('div');
            badge.className = 'text-left pl-3';
            badge.innerHTML = '<div class="font-weight-bold block">' + name + '</div>' +
                '<div class="block">' + address + '</div>' +
                '<p>' + city + '</p>';
    
            document.getElementById("location-list").appendChild(badge);
        }
    
        var result_number;
        if (filtered_data.length > 0) {
            result_number = filtered_data.length + " locations";
        } else {
            result_number = "No " + selected_location;
        }
        document.getElementById("location-number").innerHTML = '<p class="pl-5"><small>' + result_number + '</small></p>';
    
        filtered_data = [];
    }
}

Объяснение JavaScript

Мы запускаем код JavaScript с оператора if, чтобы проверить, найден ли элемент на текущей странице. Если это правда, это означает, что элементы находятся на текущей странице, тогда остальная часть кода будет выполнена, иначе остальная часть кода будет пропущена. Эта проверка предотвращает ошибки на страницах, которые нам не интересны.

Затем мы инициализируем переменную selected_location, которая будет использоваться для хранения значения выбранных переключателей.

windows.onload запустит функцию « show_location» , которая отображает расположения, и передаст ей значение “все”, чтобы все местоположения были видны при загрузке страницы.

var radios = document.forms["location_display_form"].elements["store_type"];
    
    for(var i = 0, max = radios.length; i < max; i++) {
        radios[i].onclick = function() {
            show_location(this.value);
        }
    }

Затем мы выбираем все элементы store_type – «имя» каждого переключателя, которые находятся в «location_display_form» – имя формы, в которой находятся переключатели.

Затем мы проходим цикл var - radios, чтобы найти конкретную кнопку, которая была нажата, затем вызываем show_location() и передаем значение этого переключателя функции.

var filtered_data = data;
    
if (selected_location !== "all") {
   filtered_data = data.filter((obj, index, arr) => {
       return obj.location_type == selected_location
   });
}

В следующем коде, который аналогичен приведенному выше, мы сопоставляем новую переменную «filter_data» с данными. Вместо того, чтобы редактировать исходный массив напрямую, в случае, если пользователь нажимает что-то еще. Мы можем повторно заполнить местоположение, а затем перейти к фильтрации.

for (let index = 0; index < filtered_data.length; index++) {
    
    var name = filtered_data[index].name;
    var address = filtered_data[index].address;
    var city = filtered_data[index].city;
    var location_type = filtered_data[index].location_type;

    var badge = document.createElement('div');
    badge.className = 'text-left pl-3';
    badge.innerHTML = '<div class="font-weight-bold block">' + name + '</div>' +
        '<div class="block">' + address + '</div>' +
        '<p>' + city + '</p>';

    document.getElementById("location-list").appendChild(badge);
}

В операторе if мы проверяем selected_location на завершенность. Если это все, мы пропускаем функцию, так что новый массив filtered_data не сортируется. Если selected_location не закончена, то мы фильтруем только те значения, которые имеют location_type как selected_location.

Следующий оператор for проходит через filter_data для создания необходимого HTML и добавляет его к элементу div с идентификатором location-list, чтобы он теперь был виден во внешнем интерфейсе.

var result_number;
if (filtered_data.length > 0) {
    result_number = filtered_data.length + " locations";
} else {
    result_number = "No " + selected_location;
}
document.getElementById("location-number").innerHTML = '<p class="pl-5"><small>' + result_number + '</small></p>';

Эта часть приведенного выше кода будет подсчитывать количество записей, чтобы произвести количество местоположений, связанных с выбранным элементом. Например, он отвечает за отображение «10 локаций», если выбрано все, или «Нет ресторанов», если результат не найден.

filtered_data = [];

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

Ответить