Javascript jQuery addClass（）在同时使用attr（“href”，something）时不工作

我想创建一个只在第二次点击时起作用的引导按钮形式的链接；在第一次单击时，它应该会稍微更改其外观。为此，我使用.addClassnewClass、.removeClassoldClass，然后使用attrref、newUrl

编辑以澄清：在开始时，链接锚作为其href目标和onlick处理程序。当在第一次单击时执行该处理程序时，它将从锚点中移除自身，并在hrefattribute中设置所需的目标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>

---

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

你必须检查这是否是第一次单击按钮。为此，可以使用变量。检查下面的代码

var clk=0;
function enabletwoclickbutton(btn_id, url) {
if(clk==0){
 clk++;
}else{
clk=0;
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.");
    }
}

---

检查

您必须检查是否是第一次单击按钮。为此，可以使用变量。检查下面的代码

var clk=0;
function enabletwoclickbutton(btn_id, url) {
if(clk==0){
 clk++;
}else{
clk=0;
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.");
    }
}

选中

首先添加返回false；在onclick函数调用后停止默认重定向。然后在函数中可以将onclick设置为null，这样就不会再次调用它

功能启用两个ClickButton\u id、url{ var，其btn=+btn\U id； var btn=$whichbtn； 如果btn.HASSCLASSBTN-warning{ btn.offclick； btn.attrref，url； 删除类“btn-warning”； btn.addClass“btn-danger”； btn.attr'onclick'，空； }否则{ 嘿，这不应该发生。； } } .btn警告{ 颜色：橙色； } .btn危险{ 颜色：红色； } 首先添加返回false；在onclick函数调用后停止默认重定向。然后在函数中可以将onclick设置为null，这样就不会再次调用它

功能启用两个ClickButton\u id、url{ var，其btn=+btn\U id； var btn=$whichbtn； 如果btn.HASSCLASSBTN-warning{ btn.offclick； btn.attrref，url； 删除类“btn-warning”； btn.addClass“btn-danger”； btn.attr'onclick'，空； }否则{ 嘿，这不应该发生。； } } .btn警告{ 颜色：橙色； } .btn危险{ 颜色：红色； } 使用e.preventDefault可避免锚点的默认行为

不过，我建议您使用下面的方法，以提高可读性，便于以后修改

html

推荐

不要将javascript和html混合在一起，正如您在代码中看到的那样，它们很难阅读。您只能用javascript编写整个代码

例如

$'twoclick-vjffkrzw'。单击函数E{ var btn=$this； 如果btn.HASSCLASSBTN-warning{ e、 防止违约； //btn.offclick； btn.attrref，'http://localhost/something.php?cmd=admin&；func=userdetail&；pk=53&；action=removole&；rolepk=1'； 删除类“btn-warning”； btn.addClass“btn-danger”； }否则{ 嘿，这不应该发生。； } } 使用e.preventDefault可避免锚点的默认行为

不过，我建议您使用下面的方法，以提高可读性，便于以后修改

html

推荐

不要将javascript和html混合在一起，正如您在代码中看到的那样，它们很难阅读。您只能用javascript编写整个代码

例如

$'twoclick-vjffkrzw'。单击函数E{ var btn=$this； 如果btn.HASSCLASSBTN-warning{ e、 防止违约； //btn.offclick； btn.attrref，'http://localhost/something.php?cmd=admin&；func=userdetail&；pk=53&；action=removole&；rolepk=1'； 删除类“btn-warning”； btn.addClass“btn-danger”； }否则{ 嘿，这不应该发生。； } } 为了清晰起见，我会使用data属性来存储添加到btn类中的url值

<a data-action="http://localhost/something.php?cmd=admin&amp;func=userdetail&amp;pk=53&amp;action=removerole&amp;rolepk=1" class="btn btn-xs btn-warning my-btn" href="#">Remove this</a>

编辑@A.Wolff评论 顺便说一句：检查btn警告类的存在实际上是毫无意义的。无论如何，在第二次单击时不会处理单击事件

$('.my-btn').click(function(event){
    event.preventDefault();
    $(this).removeClass('btn-warning').addClass('btn-danger')
           .off('click').attr('href', $(this).data("action"));
});

为了清晰起见，我会使用data属性来存储添加到btn类中的url值

<a data-action="http://localhost/something.php?cmd=admin&amp;func=userdetail&amp;pk=53&amp;action=removerole&amp;rolepk=1" class="btn btn-xs btn-warning my-btn" href="#">Remove this</a>

编辑@A.Wolff评论 顺便说一句：检查btn警告类的存在实际上是毫无意义的。无论如何，在第二次单击时不会处理单击事件

$('.my-btn').click(function(event){
    event.preventDefault();
    $(this).removeClass('btn-warning').addClass('btn-danger')
           .off('click').attr('href', $(this).data("action"));
});

---

通过各种答案的输入，我能够找出发生了什么

显然，只有在事件处理程序退出后，才会执行更改的href。因为在chnce的配置中，它重定向到了同一个页面，页面实际上被重新加载，这就是为什么按钮/链接恢复了原来的外观，这让我相信att r设置不正确

关键是在设置新URL之前只需调用event.preventDefault

有些人建议直接或间接地在JS中生成按钮单击处理程序。我不认为这会使代码更可读——唯一使HTML不可读的是长URL。由于HTML是动态生成的，这无论如何都不是一个实用的解决方案

因此，最终确定的代码如下所示：

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');
        btn.addClass('btn-danger');
    } else {
        console.log("Hey, this shouldnt happen.");
    }

}

---

现在它可以执行了。

通过各种答案的输入，我能够找出发生了什么

显然，只有在事件处理程序退出后，才会执行更改的href。因为在chnce的配置中，它重定向到了同一个页面，页面实际上被重新加载，这就是为什么按钮/链接恢复了原来的外观，这让我误以为attr设置不正确

关键是在设置新URL之前只需调用event.preventDefault

有些人建议直接或间接地在JS中生成按钮单击处理程序。我不认为这会使代码更可读——唯一使HTML不可读的是长URL。由于HTML是动态生成的，这无论如何都不是一个实用的解决方案

因此，最终确定的代码如下所示：

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');
        btn.addClass('btn-danger');
    } else {
        console.log("Hey, this shouldnt happen.");
    }

}

---

现在它可以执行。

取消单击操作取消单击操作这不会处理锚定单击行为的所有特定情况，例如按住ctrl键在新选项卡/窗口中打开它。这可能很重要，也可能不重要。这不会处理锚定单击行为的所有特定情况，例如按住ctrl键在新选项卡/窗口中打开锚定单击。这可能不重要，但在第二次单击时，事件仍将被阻止。请注意，OP编辑了问题。在这种情况下，将preventDefault移动到if条件内…：。。已经更新了，谢谢@A.Wolff@ᴀʀᴛᴜʀғɪʟɪᴘɪᴀᴋ 是的，有道理！！更新谢谢：。。。移除。关闭。请随意更新。但在第二次点击时，该事件仍将被阻止。请注意，OP编辑了该问题。在这种情况下，将preventDefault移动到if条件内…：。。已经更新了，谢谢@A.Wolff@ᴀʀᴛᴜʀғɪʟɪᴘɪᴀᴋ 是的，有道理！！更新谢谢：。。。移除。关闭。感觉自由并更新它。没有必要；这是通过类检查完成的。在第二次点击时，链接不再具有btn警告类。不需要；这是通过类检查完成的。在第二次单击时，链接不再具有btn警告类。