javascript - jQuery addClass() 在还使用 attr ("href"时不起作用，有些东西)

Question

我想创建一个仅在第二次点击时有效的链接(以 Bootstrap 按钮的形式)；在第一次点击时，它应该稍微改变一下它的外观。为此，我使用 .addClass(newClass) , .removeClass(oldClass) , 然后 attr("href", newUrl) .

(编辑) 澄清一下:一开始，链接( anchor )的 href 是“#”目标和一个 onlick 处理程序。该处理程序在第一次点击时执行，将从 anchor 中删除自身，而是在 href 中设置所需的目标 URL。属性。这应该会导致链接仅在第二次点击时重定向到其目标 URL。)

这几乎可以工作，但前提是我省略了 attr()环境。当它存在时，该类会在脚本退出后立即恢复为链接的旧类。当我在调试器中单步执行它时，该链接会按预期短暂更改其外观，但会在事件处理程序退出时变回原样。

这是 HTML 代码:

<a id="twoclick-vjffkrzw" onclick="enabletwoclickbutton('twoclick-vjffkrzw', 
'http://localhost/something.php?cmd=admin&amp;func=userdetail&amp;pk=53&amp;action=removerole&amp;rolepk=1')"
class="btn btn-xs btn-warning" href="#">Remove this</a>

脚本:

function enabletwoclickbutton(btn_id, url) {
    var whichbtn = '#' + btn_id;
    var btn = $(whichbtn);
    if (btn.hasClass("btn-warning")) {
        btn.off("click");
        btn.attr("href", url);
        btn.removeClass('btn-warning');
        btn.addClass('btn-danger');

    } else {
        console.log("Hey, this shouldnt happen.");
    }

}

我在 JS 和 jQuery 方面不是很有经验，所以这很可能是我犯的一个愚蠢的错误，但我就是看不出来。

Answer 1

使用 e.preventDefault() 来避免 anchor 的默认行为。

您的方式(但是我建议您使用下面的方式以提高可读性并便于以后修改。)

html

<a id="twoclick-vjffkrzw" onclick="enabletwoclickbutton(event,'twoclick-vjffkrzw', 'http://localhost/something.php?cmd=admin&amp;func=userdetail&amp;pk=53&amp;action=removerole&amp;rolepk=1')" class="btn btn-xs btn-warning" href="#">Remove this</a>

js

 function enabletwoclickbutton(e,btn_id, url) {
    var whichbtn = '#' + btn_id;
    var btn = $(whichbtn);
    if (btn.hasClass("btn-warning")) {
        e.preventDefault();
        //btn.off("click");
        btn.attr("href", url);
        btn.removeClass('btn-warning')
           .addClass('btn-danger');

    } else {
        console.log("Hey, this shouldnt happen.");
    }

}

推荐

不要混合你的 javascript 和 html，因为你可以在你的代码中看到它们很难阅读。您只能用 javascript 编写整个代码

例如。

$('#twoclick-vjffkrzw').click(function(e){
    var btn = $(this);
    if (btn.hasClass("btn-warning")) {
        e.preventDefault();
        //btn.off("click");
        btn.attr("href", 'http://localhost/something.php?cmd=admin&func=userdetail&pk=53&action=removerole&rolepk=1');
        btn.removeClass('btn-warning');
        btn.addClass('btn-danger');

    } else {
        console.log("Hey, this shouldnt happen.");
    }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="twoclick-vjffkrzw" class="btn btn-xs btn-warning" href="#">Remove this</a>