Question

我一直在为摄影师做项目。

我正在尝试为照片制作类别列表。像这样： Category of photos

但问题是，当我点击一个类别时，它会自动刷新网站，这不是我想要的。我想刷新照片，而不是网站。

我尝试在Javascript中使用preventDefault，但它不起作用。

我该如何解决这个问题？

- 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; ?>

谢谢

Yawuar。

Answer 1

preventDefault可能无法正常工作，因为当您尝试添加事件侦听器时页面尚未加载，请尝试以下操作：

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);
    }
});

即使preventDefault有效，它也只会阻止页面访问您的PHP。您需要使用事件处理程序向PHP URL发出AJAX请求，然后将响应注入页面。类似于：

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();

Wordpress获取图像类别而不刷新页面

1 个答案: