时间戳

首页 > 解决方案 > 防止多次点击 .click()

javascript - 防止多次点击 .click()

问题描述

我正在尝试用 jquery 做我自己的滑块。一切都很好，但是当用户多次单击箭头以获取下一张图片时，它开始做一些奇怪的事情：

$( document ).ready(function() {
    $("#arrow-right").click(function(){
        nextPrevius(1);
    });
    $("#arrow-left").click(function(){
        nextPrevius(-1);
    });
});

function nextPrevius(value){
    var id = parseInt($(".activo").attr("id"));
    if(id+value<1){
        $(".activo").fadeOut("slow", function() {
            $("#5").fadeIn("slow");
        });
        $(".activo").removeClass("activo");        
        $("#5").addClass("activo");
    }
    else if(id+value>5){
        $(".activo").fadeOut("slow", function() {
            $("#1").fadeIn("slow");
        });
        $(".activo").removeClass("activo");
        $("#1").addClass("activo");
    }
    else{
        $(".activo").fadeOut("slow", function() {
            $("#"+(id+value)).fadeIn("slow");
        });
        $(".activo").removeClass("activo");
        $("#"+(id+value)).addClass("activo");
    }
}
body{
    margin: 0;
}
#slider{
    width: 100%;
    height: 250px;
    position: relative;
}
.activo{
    display: block;
}
.contenido-slider{
    background-color: #d0d2ff;
    width: 100%;
    height: 250px;

}
.contenido-slider span{
    position: absolute;
    top: 45%;
    left: 50%;
}
#arrow-left{
    position: absolute;
    top: 50%;
    left: 2%;
    cursor: pointer;
}
#arrow-right{
    position: absolute;
    top: 50%;
    right: 2%;
    cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
 
    <title>Slider</title>
  </head>
    <body>

        <section id="slider">
            <div id="1" class="activo contenido-slider">
                <span>1</span>
            </div>
            <div id="2" class="contenido-slider" style="display:none">
                <span>2</span>
            </div>
            <div id="3" class="contenido-slider" style="display:none">
                <span>3</span>
            </div>
            <div id="4" class="contenido-slider" style="display:none">
                <span>4</span>
            </div>
            <div id="5" class="contenido-slider" style="display:none">
                <span>5</span>
            </div>
            <div id="arrow-left">Prev</div>
            <div id="arrow-right">next</div>
        </section>

        <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
        <script src="js/global.js"></script>
    </body>
</html>

我知道我可以使用：

$(this).removeAttr('disabled');

但这不是按钮，当我使用按钮并设置禁用属性时，光标变为禁止信号，我不希望那样。

如何防止多次点击？

是的，我在互联网和这个论坛上阅读了很多信息，但我无法阻止多次点击。

标签： javascriptjquery

解决方案

尝试我对 Javascript 代码所做的下一个修改：

$( document ).ready(function()
{
    $("#arrow-right").click(function() {
        nextPrevius(1);
    });

    $("#arrow-left").click(function() {
        nextPrevius(-1);
    });
});

function nextPrevius(value)
{
    // Just for safe, check if there is an active slider.

    if ($(".activo").length <= 0) return;

    // Get the ID of the current active slider.

    var id = parseInt($(".activo").attr("id"));

    // Get the number of total sliders.

    var totalSliders = $(".contenido-slider").length;

    // Get the ID of the next element we need to fade-in.

    var nextId = id + value;

    if (nextId < 1)
        nextId = totalSliders;
    else if (nextId > totalSliders)
        nextId = 1;

    // Hide the current active slider and fade-in the needed one.

    $(".contenido-slider.activo").removeClass("activo").fadeOut("slow", function()
    {
        $("#" + nextId).fadeIn("slow").addClass("activo");
    });
}
body{
    margin: 0;
}
#slider{
    width: 100%;
    height: 250px;
    position: relative;
}
.activo{
    display: block;
}
.contenido-slider{
    background-color: #d0d2ff;
    width: 100%;
    height: 250px;

}
.contenido-slider span{
    position: absolute;
    top: 45%;
    left: 50%;
}
#arrow-left{
    position: absolute;
    top: 50%;
    left: 2%;
    cursor: pointer;
}
#arrow-right{
    position: absolute;
    top: 50%;
    right: 2%;
    cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="css/font-awesome.min.css">
 
        <title>Slider</title>
    </head>
    <body>
        <section id="slider">
            <div id="1" class="activo contenido-slider">
                <span>1</span>
            </div>
            <div id="2" class="contenido-slider" style="display:none">
                <span>2</span>
            </div>
            <div id="3" class="contenido-slider" style="display:none">
                <span>3</span>
            </div>
            <div id="4" class="contenido-slider" style="display:none">
                <span>4</span>
            </div>
            <div id="5" class="contenido-slider" style="display:none">
                <span>5</span>
            </div>
            <div id="arrow-left">Prev</div>
            <div id="arrow-right">next</div>
        </section>

        <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
        <script src="js/global.js"></script>
    </body>
</html>

推荐阅读