Wordpress bekommen Kategorie von Bildern ohne die Seite zu aktualisieren

Question

Ich habe an einem Projekt für einen Fotografen gearbeitet.

Ich versuche, eine Kategorieliste für die Fotos zu machen. Category of photos

Aber das Problem ist, wenn ich auf eine Kategorie klicke, erneuert es automatisch die Web site, das ist nicht, was ich will. Ich möchte die Fotos aktualisieren, nicht die Website.

Ich habe versucht, preventDefault in Javascript verwenden, aber es funktioniert nicht.

Wie muss ich das beheben?

- Javascript -

function getClick(event) { 
     event.preventDefault(); 
    } 

    var getCategory = document.querySelectorAll(".cat a"); 
    for(var i = 0, ilen = getCategory.length; i < ilen; i++) { 
     getCategory[i].addEventListener("click", getClick); 
    } 

- HTML -

<div class="cat"> 
    <ul> 
     <li><a class="recent" href="?assignement=recent">RECENT</a></li> 
     <li><a class="all" href="?assignement=all">ALL</a></li> 
    </ul> 
</div> 

- Php Wordpress--

<?php if($_GET["assignement"] == "recent") : ?> 
       <?php 
      $args = array('posts_per_page' => 100, 'orderby' => 'date'); 
        global $post; 
        $recent_posts = get_posts($args); 
        foreach($recent_posts as $post) : 
        ?> 
        <?php if(in_category("photos")) : ?> 
        <div class="grid-item hover-item" id="post-<?php the_ID(); ?>" <?php post_class(); ?>> 
        <div class="photo-title"> 
         <?php 
         if (is_single()) { 
          the_title('<h2 class="entry-title">', '</h2>'); 
         } else { 
          the_title('<h2 class="entry-title">', '</h2>'); 
         } 
         ?> 
         <p>by <a href="Michelle">MICHELLE</a></p> 
        </div> 
        <?php add_theme_support('post-thumbnails'); ?> 
        <?php the_post_thumbnail(); ?> 
        </div><!-- grid-item --> 
        <?php endif; ?> 
       <?php endforeach; ?> 
     <?php endif; ?> 

Danke

Yawuar.

Answer 1

1. preventDefault wahrscheinlich nicht funktioniert, weil die Seite nicht geladen ist, wenn Sie versuchen, die Ereignis-Listener hinzufügen, versuchen, etwas wie folgt aus:

window.addEventListener('click', function() { 
 
    function getClick(event) { 
 
     event.preventDefault(); 
 
    } 
 
    
 
    var getCategory = document.querySelectorAll(".cat a"); 
 
    for (var i = 0, ilen = getCategory.length; i < ilen; i++) { 
 
     getCategory[i].addEventListener("click", getClick); 
 
    } 
 
});

2. Auch wenn preventDefault funktioniert, wird es einfach verhindern, dass die Seite Ihr PHP trifft. Sie müssen Ihren Ereignishandler verwenden, um eine AJAX-Anforderung an die PHP-URL zu senden und dann die Antwort in die Seite zu injizieren. Etwas ähnliches wie:

var xhttp = new XMLHttpRequest(); 
 
xhttp.onreadystatechange = function() { 
 
    if (xhttp.readyState == 4 && xhttp.status == 200) { 
 
    document.getElementById("your_photos_element").innerHTML = xhttp.responseText; 
 
    } 
 
}; 
 
xhttp.open("GET", "your_php_url.php", true); 
 
xhttp.send();