0

クリックしたアンカータグにクラスを分離して追加しようとしています。タグはWordpressループから取得されています。JQueryを記述して「静的」クラスを削除することはできますが、クリックしただけでなく、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>

このhtmlを生成します：

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

JQuery：

$("div.more a").on("click", function () {
    $("a.static").removeClass("static");
    $(this).addClass("active");
});

私はこことここで他の同様の質問を再検討しましたが、どちらの解決策も私にはうまくいきません。これはJQueryで実行できますか、それともHTMLインラインアンカーにクリックイベントを配置する必要がありますか？

ページがリロードされるまで、ほんの一瞬動作しているようです。

Chrome開発ツールを使用してソースを表示しています。正しく機能しているように見えますが、ページがリロードされると、「静的」クラスがdiv内のすべてのアンカータグから削除されます。ページの読み込み後に、新しく追加されたクラス名が削除される理由はありますか？

URLを介して変数を渡すことにより、プロジェクトのセットをロードしています。たとえば、[ Things?type=airports ]をクリックすると、特定の相対投稿を取得するためにURLが渡されます。

アップデート：

おそらく、これを達成するためのより良い方法があります。全体的な目標は、結果セットを表示するときにクリックしたリンクをユーザーに表示することです。したがって、「THings」をクリックすると、リンクの背景が緑色、タイプが白色などになります。JQueryはページのリロードで追加されたクラスを削除するため、phpの方が優れたソリューションでしょうか。

更新2

提案されたコードはすべて機能しました。リンクがページをリロードし、urlパラメータでフィルタリングしているため、問題は解決されていませんが、答えは完全に正しかったです。

4

6 に答える 6

2 
$("div.more a").on("click", function () {
    $(this).removeClass("static").addClass("active");
});

$(this)この場合、現在クリックされているオブジェクトを意味します。

追加クラスが機能しないことを説明することはできません。最新のjqueryで試してみましたが、機能しています。アクティブに追加されていませんか？

編集

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

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

そして、アレクサンダーによる私の下の答えから恥知らずに盗む：P：

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

そのようなことを試してみてください。いくつかのエラーがあるかもしれませんが、いくつかの読書であなたはそれらを修正できると確信しています。

もう一度編集します。

次の点に注意してください。

   event.preventDefault();

つまり、リンクをたどらないため、このリンクをクリックしてもページが再読み込みされません。これで実際に問題は解決すると思います。

使用することを忘れないでください：

$("div.more a").on("click", function (event) {

それ以外の場合は機能しません。

于 2012-06-23T21:09:47.883 に答える
2

私はこれで行きます：

$("div.more a").on("click", function () {
  // Revert all to original state
  $("a.static")
    .removeClass("active")
    .addClass("static");
  // Set classes to clicked anchor
  $(this)
    .removeClass("static")
    .addClass("active");
});
  • activeすべてのアンカーからクラスを削除します。
  • staticクラスをすべてのアンカーに追加します。
  • staticクリックされたアンカーからクラスを削除します。
  • activeクリックしたアンカーにクラスを追加します。
于 2012-06-23T21:20:01.940 に答える
1

onclick関数をラップするだけです

$(document).ready(function() {});

ドキュメントの準備ができたらリッスンするようにします。どちらの回答または形式を選択しても、次のようになります。

$(document).ready(function() {
    $("div.more a").click(function () {
        $("a.static").removeClass("static");
        $(this).addClass("active");
    });
});

とてもシンプル

于 2012-06-23T21:38:11.340 に答える
1

動的に生成された要素について話している場合は、.on()メソッド (ok) を使用する必要がありますが、クリック リスナーをa次のような要素にバインドします。

$("div.more").on('click', 'a:not(.active)', function () {
    $(this).addClass('active').siblings('.active').removeClass('active').addClass('static');
});

使っa:not(.active)てクリックEVを付けます。将来の要素に移動し、クリックした要素がまだクラスを持っていないことを確認しますactive。

于 2012-06-23T21:27:23.740 に答える
1

試す：

$("div.more a").on("click", function () {
    $("a.active").removeClass("active").addClass("static");
    $(this).removeClass("static").addClass("active");
});
于 2012-06-23T21:27:50.890 に答える
0

上記のすべてを試しましたが、上記のいずれも問題を解決しませんでした。それらが良い例ではないからではなく、私がそれらを理解していなかったからです。ただし、@ Duncanmooソリューションを編集したところ、うまくいきました。これはあなたにも役立つかもしれません。

$(document).ready(function() {
$("ul.arbetstagare a").click(function () {
    $("a").removeClass("active");
    $("a.active").removeClass("static");
    $(this).addClass("active");
});});
于 2013-07-18T17:22:37.033 に答える