0

すべてのプロジェクトを表示する作業ページがあります。分類法を使用して、クリックされたリンクに応じて結果をグループ化して表示しています。全体的な目標は、フィルタリングされた結果を表示しながら、クリックされたリンクを強調表示したままにすることです。ユーザーが [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=新しいフィルター処理された結果を取得するには、URL を介して渡す必要があります。これは Ajax を使用して実行できることが提案されました。私はそれを実行する方法について知りません。

または、Jquery を使用して、URL を介して渡された値を取得し、それをリンクと一致させることはできますか?

アップデート

簡単に説明しましょう。<a>タグにアクティブというクラスを渡すことで、どのリンクがクリックされたかをユーザーに表示したいと思います。

したがって、デフォルトでは、コードは次のようになります。

<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") は保持されません。

これに対する解決策はありますか？

4

1 に答える 1

1

2 種類のソリューションがあります。

  1. 次のページを読み込むときは、分類法を確認し、そのナビゲーション アイテムをアクティブにします。その場合<a class="static<?php if (is_post_type_archive('Things')) { echo ' active'; } ?>" href="site/?type=Things">はナビ内の各項目に等をご利用ください。is_post_type_archive 関数を選択したことに注意してください。ただし、分類法によって異なる場合があります。
  2. ページのコンテンツを 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 は、ループがある場所である必要があります。

于 2012-06-24T00:28:14.800 に答える