0

我试图在单击后将 CSS 链接禁用 1 秒钟。

我试过这个没有成功；

在标题中：

<script type="text/javascript">
$(function() {
    $("#link").click(function() {
        $("#link").attr("disabled", "disabled");
        setTimeout(function() {
            $("#link").removeAttr("disabled");      
        }, 2000);
    });
});
</script>

html:

<a href="#" class="link">the link text</a>

CSS：

.link:diabled {
some values here.. }
4

4 回答 4

4

你有一个class="link"，但与$("#link")你正在解决被id调用的问题link。

所以$(".link")到处写而不是$("#link").

顺便说一句：.link:disabled你不会处理链接，因为这仅适用于输入和按钮。如果您需要解决它，请使用.link[disabled="disabled"] { ... }甚至更好地为其添加一个名为的类disabled_link，然后在 CSS 中执行.disabled_link { ... }。

于 2013-06-03T19:26:49.423 回答
3

'link'是一个类，您将其用作ID。做$('.link')而不是$('#link').

于 2013-06-03T19:27:02.477 回答
3

这里有很多问题：

  1. 您正在使用#（ID 选择器），但您的 html 正在使用类。
  2. <a>没有禁用属性
  3. 如果是这样，您可能希望使用.prop而不是.attr
  4. 如果您更改代码以使用类，$(".link").prop("disabled", true)则会影响所有锚点，因此您可能应该使用this.
  5. 因为disabled不存在<a>，所以:disabled选择器似乎不适用于 CSS。

一个可行的解决方案是这样的：

$(".link").click(function() {
    var $this = $(this);
    $this.addClass('disabled');
    setTimeout(function() {
        $this.removeClass('disabled');
    }, 2000);
});

$(document).on('click', '.disabled', function (e) {
    e.preventDefault();
});

http://jsfiddle.net/ExplosionPIlls/PaYcc/

于 2013-06-03T19:31:14.970 回答
0

我认为这种方法效果更好。另一个允许您多次单击链接并弄乱 setTimeout 这会取消绑定事件，然后在 setTimeout 之后重新附加事件 例如：双击链接

$(".link").click(linkBind);
function linkBind(){
    var $this = $(this);
        $this.addClass('disabled');
        $this.unbind('click');
        setTimeout(function() {
            $this.removeClass('disabled');
            $this.bind('click', linkBind);
        }, 2000);
}

$(document).on('click', '.disabled', function (e) {
    e.preventDefault();
});

http://jsfiddle.net/PaYcc/1/

于 2013-06-03T19:43:39.643 回答