从 Wordpress 循环中单击链接时添加一个类

Question

我正在尝试隔离并将一个类添加到单击的锚标记。标签是从 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");
});

我已经复习了here 和here 的其他类似问题，但是这两种解决方案都不适合我。这可以用 JQuery 完成还是应该在 html 内联锚点中放置一个点击事件？

看起来它只工作了一秒钟，直到页面重新加载。

我正在使用 Chrome 开发工具查看源代码。看起来它工作正常，但是当页面重新加载时，“静态”类会从 div 中的所有锚标记中删除。 新添加的类名在页面加载后被删除是否有原因？

它通过 url 传递一个变量来加载一组项目。例如，当您点击 Things 时，它会在 url 中传递 ?type=airports 以获取特定的相关帖子。

更新：

也许有更好的方法来实现这一点。总体目标是向用户显示他们在查看结果集时单击了哪个链接。所以当点击“THings”时，链接有绿色背景和白色类型等。由于JQuery正在删除页面重新加载时添加的类，php会是更好的解决方案吗？

更新 2

所有建议的代码都有效。由于链接正在重新加载页面并通过 url 参数进行过滤，因此问题未解决，但答案完全正确。

Answer 1

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

否则将无法正常工作。

Answer 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 类添加到单击的锚点。

Answer 3

如果您在谈论动态生成的元素，则需要使用.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 类。

Answer 4

尝试：

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

Answer 5

您只需将 onclick 函数包装在

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

以便在文档准备好后进行侦听。无论您选择哪种答案或格式：

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

真的很简单

Answer 6

我尝试了以上所有方法，但以上都没有解决我的问题。不是因为他们不是很好的例子，而是因为我不理解那些。但是我编辑了@Duncanmoo 解决方案，它对我有用。这也可能对您有用。

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