Question

我试图在点击后禁用1秒的CSS链接。

我试过这个没有成功;

在标题中：

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

Answer 1

您有一个class="link"，但$("#link")您正在处理名为id的{{1}}。

所以在任何地方写link而不是$(".link")。

顺便说一句：使用$("#link")，您将无法处理链接，因为这仅适用于输入和按钮。如果您需要解决此问题，请使用.link:disabled或者甚至更好地为其添加一个名为.link[disabled="disabled"] { ... }的类，然后使用CSS disabled_link。

Answer 2

'link'是类，您将其用作 ID 。请$('.link')代替$('#link')。

Answer 3

这里有很多问题：

您正在使用#（ID选择器），但您的html正在使用类。
<a>没有已停用的属性
如果确实如此，您可能希望使用.prop代替.attr
如果您更改代码以使用类，$(".link").prop("disabled", true)会影响所有锚点，因此您应该使用this。
由于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/

Answer 4

我认为这种方法效果更好。另一个允许你多次点击链接并弄乱setTimeout这解除绑定事件，然后在setTimeout ex之后重新附加事件：双击链接

$(".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/

单击后禁用CSS链接1秒钟

4 个答案: