ALL Things More Things Objects Goals Books Drawings Thoughts </div> Dus de koppeling filtert de"> ALL Things More Things Objects Goals Books Drawings Thoughts </div> Dus de koppeling filtert de"> ALL Things More Things Objects Goals Books Drawings Thoughts </div> Dus de koppeling filtert de" />

Hoe AJAX te gebruiken om een ​​specifieke lus uit een url-parameter in WordPress te trekken

Ik heb een werkpagina met alle projecten. Ik gebruik een taxonomie om de resultaten te groeperen en weer te geven op basis van welke koppeling wordt geklikt. Het algemene doel is om de link waarop is geklikt gemarkeerd te houden terwijl het gefilterde resultaat wordt weergegeven. Als de gebruiker op Dingen klikt, worden Dingen vet weergegeven en laadt de pagina alleen de resultaten die zijn gecatalogeerd als 'Dingen' in WP.

De HTML is als volgt:

<div class="more">
    ALL
    Things
    More Things
    Objects
    Goals
    Books
    Drawings
    Thoughts
</div>

Dus de koppeling filtert de projectresultaatset. Hier is de WP-lus die de links trekt:

<div class="more">
    ALL           
    <?php
    foreach ($tax_terms as $tax_term) {
    echo 'name ) . '" ' . '>' . $tax_term->name.'';
    } ?>
</div>

Ik heb wat jQuery ingesteld, zodat het laat zien op welke pagina de gebruiker zich bevindt.

$(function(){
    $("div.more a").forEach(function(i){
        var active = window.location.hash;

        if($(this).text() == active){
            $(this).trigger('click');
        }
    }); 
});

$("div.more a").on("click", function (event) {
   event.preventDefault();
 //Revert all to original state
  $("a.static")
    .removeClass("active")
    .addClass("static");
 //Set classes to clicked anchor
  $(this)
    .removeClass("static")
    .addClass("active");

  window.location.hash = $(this).text();
});

Dit is waar het probleem zich voordoet. Om de klassenwijziging te behouden die de gebruiker laat zien op welke titel van het project werd geklikt, heb ik de optie voor het opnieuw laden van de pagina verwijderd. Ik moet nog steeds het ? Type = door de URL sturen om een ​​nieuw gefilterd resultaat te krijgen. Er werd gesuggereerd dat dit met Ajax kon worden gedaan. Ik zou niet weten hoe ik dat moest uitvoeren.

Of kan ik jQuery gebruiken om de waarde door de URL te laten gaan en die koppelen aan de link?

UPDATE

Let me simplify. I would like to show the user which link has been clicked by passing the tag a class called active.

Dus ziet de code er standaard zo uit:

<div class="more">
        ALL
        Things
        More Things
        Objects
        Goals
        Books
        Drawings
        Thoughts
    </div>

Maar wanneer de gebruiker op een link klikt, bijvoorbeeld 'Dingen', ziet de code er als volgt uit:

<div class="more">
        ALL
        Things
        More Things
        Objects
        Goals
        Books
        Drawings
        Thoughts
    </div>

In de meeste gevallen kan dit met jQuery worden opgelost

removeClass("static").addClass("active)

Maar omdat de pagina opnieuw wordt geladen wanneer een nieuwe URL-variabele wordt doorgegeven, blijft de addClass ("actief") niet bestaan ​​nadat de pagina opnieuw is geladen.

Is hier een oplossing voor?

 0
toegevoegd bewerkt
Bekeken: 1
de bron
ja ru fr es pt de ar
leg met een simpele klik het gewenste gedrag uit met een klik. Code en uitleg zijn dubbelzinnig. Code noemt hash, uitleg vermeldt zoekparameters .... erg verwarrend
toegevoegd de auteur charlietfl, de bron

1 antwoord

U hebt twee soorten oplossingen:

  1. When loading the next page, check taxonomy and make that navigation item active. In that case, use and similars for each item inside the navigation. Note I choosed is_post_type_archive function but it might differ depending on your taxonomies.
  2. Load the page contents with AJAX and using jQuery just replace the container div where your content is.

Zoiets zou kunnen helpen:

$("div.more a").on("click", function (event) {
   //prevent page reload
    event.preventDefault();
   //get the contents
    $.get(this.href, function (response) {
       //jquerify the response HTML string and find our replaceable area
        var result = $(response).find('#myContentDiv');
       //do the replace
        $('#myContentDiv').html(result);
    });
});

Ik hoop dat je deze informatie nuttig vindt. #myContentDiv moet de plaats zijn waar u uw Loop hebt.

1
toegevoegd
de bron
Dat was het. Gewoon een paar bugs om uit te werken. Dank je.
toegevoegd de auteur Carey Estes, de bron