Question

我有一个显示所有项目的工作页面。我正在使用分类法根据单击的链接分组和显示结果。总体目标是在显示过滤结果时保持点击的链接突出显示。如果用户点击了Things，那么Things将是粗体，页面将只加载WP中归类为“Things”的结果。

html是这样的：

<div class="more">
    <a class="static" href="site/work">ALL</a>
    <a class="static" href="site/?type=Things">Things</a>
    <a class="static" href="site/?type=More Things">More Things</a>
    <a class="static" href="site/?type=Objects">Objects</a>
    <a class="static" href="site/?type=Goals">Goals</a>
    <a class="static" href="site/?type=Books">Books</a>
    <a class="static" href="site/?type=Drawings">Drawings</a>
    <a class="static" href="site/?type=Thoughts">Thoughts</a>
</div>

因此链接过滤项目结果集。这是提取链接的WP循环：

<div class="more">
    <a class="static" href="<?php bloginfo('template_url'); ?>/work/">ALL</a>           
    <?php
    foreach ($tax_terms as $tax_term) {
    echo '<a class="static" href="' . esc_attr(get_term_link($tax_term, $taxonomy)) . '" title="' . sprintf( __( "View all posts in %s" ), $tax_term->name ) . '" ' . '>' . $tax_term->name.'</a>';
    } ?>
</div>

我已经设置了一些Jquery，因此它显示了用户所在的页面。

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

这就是出现问题的地方。为了保持显示用户点击了什么项目标题的类更改，我删除了页面重新加载选项。我仍然需要通过网址传递?type=以获得新的过滤结果。有人建议可以使用Ajax来完成。我不知道如何执行它。

或者我可以使用Jquery获取通过url传递的值并将其与链接进行匹配吗？

更新

让我简化一下。我想通过将<a>标记传递给一个名为active的类来向用户显示已单击的链接。

因此默认情况下，代码如下所示：

<div class="more">
        <a class="static" href="site/work">ALL</a>
        <a class="static" href="site/?type=Things">Things</a>
        <a class="static" href="site/?type=More Things">More Things</a>
        <a class="static" href="site/?type=Objects">Objects</a>
        <a class="static" href="site/?type=Goals">Goals</a>
        <a class="static" href="site/?type=Books">Books</a>
        <a class="static" href="site/?type=Drawings">Drawings</a>
        <a class="static" href="site/?type=Thoughts">Thoughts</a>
    </div>

但是当用户点击链接时，例如“Things”，代码如下所示：

<div class="more">
        <a class="active" href="site/work">ALL</a>
        <a class="static" href="site/?type=Things">Things</a>
        <a class="static" href="site/?type=More Things">More Things</a>
        <a class="static" href="site/?type=Objects">Objects</a>
        <a class="static" href="site/?type=Goals">Goals</a>
        <a class="static" href="site/?type=Books">Books</a>
        <a class="static" href="site/?type=Drawings">Drawings</a>
        <a class="static" href="site/?type=Thoughts">Thoughts</a>
    </div>

在大多数情况下，这可以通过JQuery解决

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

但是因为在传递新的url变量时页面正在重新加载，所以在重新加载页面后，addClass（“active”）不会保留。

有解决方法吗？

Answer 1

您有两种解决方案：

加载下一页时，请检查分类并使该导航项处于活动状态。在这种情况下，请对导航中的每个项目使用<a class="static<?php if (is_post_type_archive('Things')) { echo ' active'; } ?>" href="site/?type=Things">和类似物。注意我选择了is_post_type_archive function，但根据您的分类法可能会有所不同。
使用AJAX加载页面内容并使用jQuery只需替换内容所在的容器div。

这样的事情可能有所帮助：

$("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);
    });
});

我希望您发现此信息有用。 #myContentDiv应该是你拥有Loop的地方。

如何使用AJAX从Wordpress中的url参数中提取特定循环

1 个答案: