Question

是否有可能调整我的代码，以便当有人点击按钮代码时只执行一次？用户点击该按钮的次数不多。由于
的 HTML

<button class="click_me">Click</button>
<div class="example">Some text</div>

CSS

.example{
    width:100px;
    padding:5px 5px;
    background:skyblue;
    color:white;
    display:none;
}

JQUERY

$(".click_me").click(function(){
    $(".example").slideDown();
    $(".example").delay("2000").slideUp();
});

另请查看我的Fiddle！

＆＃13;

$(".click_me").click(function() {
  $(".example").slideDown();
  $(".example").delay("2000").slideUp();
});

＆＃13;

.example {
  width: 100px;
  padding: 5px 5px;
  background: skyblue;
  color: white;
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="click_me">Click</button>
<div class="example">Some text</div>

＆＃13;

Answer 1

您可以使用.one() method。这样做，该功能只执行一次。

来自jQuery docs：

.one()方法会将处理程序附加到元素的事件。每个事件类型的每个元素最多执行一次处理程序。

Updated Example

$(".click_me").one('click', function(){
    $(".example").slideDown();
    $(".example").delay("2000").slideUp();
});

Answer 2

var x = 0;

$(".click_me").click(function(){
    if ( ++x === 1 ) {
        $(".example").slideDown();
        $(".example").delay("2000").slideUp();
    }
});

Answer 3

您也可以在点击后禁用该按钮。我更喜欢这种方式，因为用户会知道按钮不能再被点击了。

$(".click_me").click(function(){
    $(this).prop("disabled",true);
    $(".example").slideDown();
    $(".example").delay("2000").slideUp();

});

Answer 4

用户在编写之前可以使用一个函数。但是这个函数实际上只执行了一次......并且不能再执行它了。

添加和删除一个类就可以了。

$(".click_me").click(function(){
    if(!$(this).hasClass('locked')) {
        $(".example").slideDown();
        $(".example").delay("2000").slideUp();
        $(this).addClass('locked');
    }
});

在这种情况下，您可以通过从元素中删除类来解锁单击。在你的情况下2s之后...像：

$(".click_me").click(function(){
    $(this) = $this;
    if(!$this.hasClass('locked')) {
        $(".example").slideDown();
        $(".example").delay("2000").slideUp();
        $this.addClass('locked');
    }
    setTimeout(function(){
        $this.removeClass('locked')
    }, 2000);
});

问候timmi

防止jquery从多个单击功能

4 个答案: