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>

查询：

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

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

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

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

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

更新：

也许有更好的方法来实现这一点。总体目标是向用户显示他们在查看结果集时单击了哪个链接。所以当点击“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

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