Question

我正在尝试在点击时在链接上添加确认文字，因此用户只需再次点击相同的链接/按钮即可执行操作

但它会在第一次点击时触发..我该怎样做才能解决这个问题，或者我做错了什么？

编辑：它适用于页面上的多个链接（任何.button）

$(".button").click(function(e) {

    e.preventDefault();

    $(this).text($(this).attr('title') + ' Sure? click again'); // adds confirm text to link

    if ($(this).text().lastIndexOf("click again", 0) != 0) {

      // NOW do the action

    }

});

Answer 1

代码的问题是在设置文本后检查文本的索引。在设置文本之前需要进行检查。但是还有其他方法可以做到这一点，而不是依赖于文本。文本可能会更改，因为有些人使用浏览器内置的翻译插件。不要依赖文字。

您可以取消绑定第一个单击事件，然后再添加另一个事件。这将一起摆脱支票。

$(".button").on("click.confirm", function(e) {
    e.preventDefault();
    var btn = $(this);
    btn.text(btn.attr('title') + ' Sure? click again'); // adds confirm text to link
    btn.off("click.confirm");

    //Bind new click event that does next step...
    btn.on("click.next", nextStep);
});

function nextStep() {
    alert("hi");
}

如果您想使用布尔逻辑，可以使用data（）来存储状态。在这种情况下，我们将存储一个布尔值true。当我们设置消息时，我们将其设置为true，然后单击if check将获得true，然后您可以触发下一步。

$(".button").on("click.confirm", function(e) {
   e.preventDefault();
   var btn = $(this);
   if (btn.data("clicked")) { 
       nextStep();
   } else {
        btn.text(btn.attr('title') + ' Sure? click again'); // adds confirm text to link        
        btn.data("clicked",true);
    }
});

如果你想使用类而不是数据属性，它也很简单。奖金是你可以添加样式表规则来改变颜色。

$(".button").on("click.confirm", function(e) {
   e.preventDefault();
   var btn = $(this);
   if (btn.hasClass("clicked")) { 
       nextStep();
   } else {
        btn.text(btn.attr('title') + ' Sure? click again'); // adds confirm text to link        
        btn.addClass("clicked");
    }
});

Answer 2

阅读你正在做的事情：

防止默认操作
将元素上的文字设置为标题，并添加“Sure？click again”文本。
检查元素上的文字是否包含“Sure？click again”文字。

你应该清楚地看到发生了什么：）

我的建议是，您只需设置一个变量来确定是否已点击某些内容。它更清晰。

var hasBeenClicked = false;
$(".button").click(function(e) {
    e.preventDefault();
    $(this).text($(this).attr('title') + ' Sure? click again'); // adds confirm text to link
    if (hasBeenClicked) {
      // NOW do the action
    } else {
        hasBeenClicked = true;
    }

});

Answer 3

无论我对你如何做到这一点的感受，与其他人不同，我不会告诉你如何以“正确”的方式做到这一点，或者建议比原始代码更复杂的事情。您只是使用lastIndexOf()错误而且缺少一点逻辑。

这是一个显示解决方案的小提琴

http://jsfiddle.net/alistproducer2/y4SD3/

    $(".button").click(function(e) {

        e.preventDefault();

        if ($(this).text().lastIndexOf("click again") == -1) {
            $(this).text($(this).attr('title') + ' Sure? click again'); // adds confirm text to link
        }else{             
             $(this).text('Worked');
        }

    });

Answer 4

如果它是一个链接，我个人会以不同的方式进行操作 - 我只会在第一次点击时分配href属性。

<a href="#" data-href="http://www.google.com" title="Whatever">Test</a>


$("[data-href]").click(function(e) {
    $(this).attr('href', $(this).data('href'));
    $(this).text($(this).attr('title') + ' Sure? click again'); // adds confirm text to link
});

http://jsfiddle.net/FwZ2P/

Answer 5

解决此问题的一种方法是指示哪些链接是实际的双击链接，需要确认并使用适当的data-clicked="no"属性来存储点击状态。因此，这比使用全局js变量更容易维护。

因此，通过这种方式，仍然可以使用一种方法绑定多次点击。

选中 js fiddle example.

下面的代码也带有评论：

<强> HTML：

<a href="#" class="button" title="Double click link" data-clicked="no">Double click link</a> 
<a href="#" class="button" title="Double click link" data-clicked="no">Double click link</a>
<a href="#" class="button" title="Normal link">Normal link</a>

<强> JavaScript的：

$(".button").on("click", function(e) {
    e.preventDefault();

    var $btn = $(this),
        clicked = $btn.data("clicked");

    // if we have clicked a link which requires another click, 
    // and if we clicked it for a first time
    if (typeof clicked !== "undefined" && 
               clicked !== false &&
               clicked === "no"
       ) {
       $btn.text($btn.attr("title") + " Sure? click again");  

       // we mark that link has been clicked once
       $btn.data("clicked", "yes");

       // ..and return from this function, because we need another click from
       // the user to confirm the click action
       return false;
    }  

    // normal execution! - do whatever you want here..
    console.log("yay, activating click action!");

    // if this was data-clicked link, we reset it for next clicks
    if (typeof clicked !== "undefined" && clicked !== false) {
        $btn.text($btn.attr("title"));
        $btn.data("clicked", "no");
    }

});

干杯。

单击两次以执行操作

5 个答案: