跳转到另一个页面部分并使用过滤器参数更新图库

问题描述 投票：0回答：1

我尝试从主页以外的页面导航到主页的作品集部分，同时根据从 URL 检索到的参数更新图库内容。例如，#portfolio?filter=print 应导航到该部分并显示“打印”的内容。然而，我已经挣扎了好几个小时了。当我在主页上时，一切正常。我可以成功更新图库并导航到每个部分，没有任何问题。但是，当我在另一个页面上时，要么我设法导航到投资组合部分而不保留参数，要么我最终到达页面顶部，但从未使用 URL 中的参数成功到达我的投资组合部分。

你能帮我吗，这是我的代码。我一定错过了一些东西，但是什么，我将非常感谢您的帮助，提前谢谢您

**站点导航-custom.php **

<nav class="nav-wrap">
   <h3 class="title menu-primary__title bold">Portfolio</h3>
       <ul class="menu-list">
          <h4 class="menu-item"><a class="hover-underline-animation" data-category="identite-visuelle" href="#portfolio?filter=identite-visuelle">Identité visuelle</a></h4>
          <h4 class="menu-item"><a class="hover-underline-animation" data-category="webdesign-sites-internet" href="#portfolio?filter=webdesign-sites-internet">Webdesign/sitesinternet</a></h4>
          <h4 class="menu-item"><a class="hover-underline-animation" data-category="print" href="#portfolio?filter=print">Print</a></h4>
          <h4 class="menu-item"><a class="hover-underline-animation" data-category="illustrations" href="#portfolio?filter=illustration">Illustrations</a></h4>
       </ul>
</nav>```

**Navigation.js**

jQuery(文档).ready(函数($) {

// Définir la catégorie par défaut
var defaultCategory = 'identite-visuelle';

// Au chargement de la page, filtrer la galerie avec la catégorie par défaut
filterGallery(defaultCategory);

// Ajouter la classe "on" au bouton correspondant à la catégorie par défaut
$('.filterable-gallery__btn[data-category="' + defaultCategory + '"]').addClass('on');


// Filtrer la galerie en fonction de la catégorie
function filterGallery(category) {
    var gallery = $('.gallery');
    var buttons = $('.filterable-gallery__btn');
    buttons.removeClass('on'); // retirer la classe "on" de tous les boutons
    $('.filterable-gallery__btn[data-category="' + category + '"]').addClass('on');

    // Envoyer une requête AJAX pour filtrer la galerie
    $.ajax({
        type: 'POST',
        url: "/wp-admin/admin-ajax.php",
        data: {
            action: 'filter_articles_by_category',
            category: category,
        },
        success: function(response) {
            gallery.html(response.data.html);
        },
        error: function(error) {
            console.error(error);
        },
    });
}

// Déclarer une variable globale pour stocker la catégorie sélectionnée
var currentCategory = defaultCategory;

// Animation au scroll et redirection vers la page d'accueil si nécessaire
$('.menu-item a').on('click', function(event) {
    var targetUrl;
    var href = $(this).attr('href');
    var target = $(this).attr('href').split('?')[0];
    var filterParam = href.split('?')[1];
    var category = $(this).data('category');
    
     if (window.location.pathname !== '/') {
        // Si vous n'êtes pas sur la page d'accueil
        if (target.includes("#portfolio")) {
            event.preventDefault(); // Prevent the default navigation behavior

        // Update the gallery with the filter parameter
        if (filterParam) {
            category = filterParam.split('=')[1]; // Extract the category value from the filter parameter
            filterGallery(category);
        }

        targetUrl = window.location.origin + target;
        window.location.href = targetUrl; 
        } else {
            targetUrl = window.location.origin + '/#' + this.hash.substr(1); // Construire l'URL pour d'autres sections
            window.location.href = targetUrl; // Rediriger vers d'autres sections
        }
    } else {
        event.preventDefault();
        $('html, body').animate({
            scrollTop: $(target).offset().top
        }, 800, function() {
            currentCategory = category || currentCategory; 
            filterGallery(currentCategory);
        });
    }
    $('#active').prop('checked', false);
});

// Lorsque vous cliquez sur un bouton de la galerie
$('.filterable-gallery__btn').on('click', function() {
    var category = $(this).data('category');
    filterGallery(category);
});

});





I tried to navigate to the portfolio section of my homepage from another page while passing parameters in the URL to update the gallery content. I expected that the navigation would successfully take me to the portfolio section and display the gallery content based on the parameters provided in the URL, such as #portfolio?filter=print. However, I encountered issues where either the parameters were not retained during navigation, or I ended up at the top of the page without reaching the portfolio section.
javascript filter anchor url-parameters
1个回答
0
投票

我通过使用同位素库改变了我的方法，并且通过单击主页上的菜单链接成功更新了我的图库。但是，当我在另一页上并单击带有“过滤器”类的链接之一以应用排序并显示类别的内容时，我的按钮会激活一小会儿然后消失，因此，我的画廊未刷新。 请您告诉我哪里错了，这一定是加载的问题，但尽管我努力了，我还是找不到问题。我确信解决方案很简单。你能帮我吗？

我的导航与链接

<nav class="menu-primary nav-wrap">
            <h3 class="title menu-primary__title bold">Freelance</h3>
            <ul class="menu-list">
                <h4 class="menu-item"><a class="hover-underline-animation" href="#accueil">Accueil</a></h4>
                <h4 class="menu-item"><a class="hover-underline-animation" href="#a-propos">À propos</a></h4>
                <h4 class="menu-item"><a class="hover-underline-animation" href="#services">Services</a></h4>
            </ul>
        </nav>
        <nav class="nav-wrap">
            <h3 class="title menu-primary__title bold">Portfolio</h3>
            <ul class="menu-list">
                <h4 class="menu-item"><a class="hover-underline-animation filter" data-category="identite-visuelle" href="#identite-visuelle">Identité visuelle</a></h4>
                <h4 class="menu-item"><a class="hover-underline-animation filter" data-category="webdesign-sites-internet" href="#webdesign-sites-internet">Webdesign/sitesinternet</a></h4>
                <h4 class="menu-item"><a class="hover-underline-animation filter" data-category="print" href="#print">Print</a></h4>
                <h4 class="menu-item"><a class="hover-underline-animation filter" data-category="illustration" href="#illustration">Illustrations</a></h4>
            </ul>
        </nav>

navigation.js

 // Isotope
        var $container = $('#gallery');
        $container.isotope({
            itemSelector: '.gallery-item',
            layoutMode: 'masonry' 
        });
        
        var $optionsSets = $('#filters');
        $optionsLinks = $optionsSets.find('a');
        
        $optionsLinks.click(function() {
            var $this = $(this);
            if ($this.hasClass('selected')) {
                return false;
            }
            
            var selector = $this.attr('data-filter');
            
            $container.isotope({
                filter: selector
            });
            
            $optionsSets.find('.selected').removeClass('selected');
            $this.addClass('selected');
            
            return false;
        });
        
        function checkFilter(event) {
            // Vérifier si l'élément cliqué a la classe "filter"
            if ($(this).hasClass('filter')) {
                var filterParam = $(this).attr('data-category');
                if (filterParam) {
                    // Filtrer les éléments de la galerie directement
                    $('#gallery').isotope({ filter: '.' + filterParam });
                    // Mettre en surbrillance le bouton de filtrage correspondant dans la galerie
                    var buttons = $('#filters').find('a');
                    buttons.removeClass('selected'); // Supprimer la classe 'selected' de tous les boutons
                    buttons.each(function() {
                        if ($(this).attr('data-filter') === '.' + filterParam) {
                            $(this).addClass('selected'); // Ajouter la classe 'selected' au bouton correspondant
                        }
                    });
                }
            }
        }
        
        
        // Clique sur les liens du menu
        jQuery('.menu-item a').on('click', function(event) {
            
            checkFilter.call(this);
    
            if (window.location.pathname !== '/') {
                // event.preventDefault();
                var targetUrl = window.location.origin + '/#' + this.hash.substr(1);
                window.location.href = targetUrl;
                return;
            }

        
            // Récupérer l'ancre
            var hash = this.hash;
        
            // Vérifier si une barre oblique "/" est ajoutée avant l'ancre dans l'URL
            if (hash.charAt(0) === '/') {
                hash = hash.substr(1); // Supprimer la barre oblique
            }
        
            // Effectuer l'animation au scroll vers la section
            if (hash !== '') {
                jQuery('html, body').animate({
                    scrollTop: jQuery(hash).offset().top
                }, 800, function() {
                    window.location.hash = hash;
                });
            }
            jQuery('#active').prop('checked', false);
        });
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.