Question

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

（编辑）澄清一下：首先，链接（锚点）有“＃”作为其href目标，以及一个onlick处理程序。该处理程序在第一次单击时执行，将从锚中删除自身，而是在href属性中设置所需的目标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

首先在return false;函数调用后添加onclick以停止默认重定向。然后在您的函数中，您可以将onclick设置为null，以便不再调用它。

＆＃13;

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

＆＃13;

.btn-warning {
  color: orange;
}
.btn-danger {
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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');return false;" class="btn btn-xs btn-warning" href="#">Remove this</a>

＆＃13;

Answer 2

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

您的方式（但我建议您使用下面的方法以便于阅读，以后再轻松修改。）

<强> 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中编写整个代码

例如。

＆＃13;

$('#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&amp;func=userdetail&amp;pk=53&amp;action=removerole&amp;rolepk=1');
        btn.removeClass('btn-warning');
        btn.addClass('btn-danger');

    } else {
        console.log("Hey, this shouldnt happen.");
    }
})

＆＃13;

<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>

＆＃13;

Answer 3

您必须检查是否是您第一次点击该按钮。要做到这一点，你可以使用一个变量。检查下面的代码

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

检查jsfiddle

Answer 4

我使用data属性来存储url值（为了清晰起见，添加了my-btn类）

<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>

然后使用jQuery设置click函数，而不是使用onClick属性（as it's not good practice）：

$('.my-btn').click(function(event){
    // prevent default click action:
    event.preventDefault();
    if ($(this).hasClass("btn-warning")) {
        $(this).removeClass('btn-warning').addClass('btn-danger');
    }else{
        // go to url on a second click:
        location.href = $(this).data("action");
    }
});

编辑（ @ A.Wolff 评论）
顺便说一句：检查btn-warning类的存在实际上是毫无意义的。无论如何都不会在第二次点击时处理click事件......

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

Answer 5

根据各种答案的输入，我能够找出发生了什么。

显然，在事件处理程序退出后，只会在中执行更改的href。由于在我的配置中它被重定向到同一页面，页面实际上被重新加载，这就是为什么按钮/链接恢复其原始外观并且欺骗我让我相信attr()设置不能正常工作。

关键是在设置新网址之前只需拨打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."); } }

现在它可以正常运行。

当使用attr（“href”，某些东西）

5 个答案: