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

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

转载作者：塔克拉玛干更新时间：2023-11-02 20:53:43

25

4

我正在尝试使用 jquery 制作我自己的 slider 。一切正常，但是当用户多次单击箭头以获取下一张图片时，它开始做奇怪的事情:

$( 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');

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

如何防止多次点击？

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

最佳答案

尝试我对 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>

关于javascript - 防止多次点击 .click()，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52669556/

25

4

0

文章推荐： javascript - 用于在导入语句中查找关键字的正则表达式

文章推荐： javascript - 的快照测试在 react native 和 Jest 中失败

jquery - .on ('click' ) 和 .off ('click' ).on ('click' ) 之间的区别
将 .off 与 .click 结合使用有何用途或区别？ $('#link').off('click').on('click',function(){}); 对比 $('#link').on('cli
javascript - JQuery/DOM元素 "click"事件注册: on ("click") VS click() VS addeventlistener ("click")
我正在学习 javascript，并且我见过不止一种注册点击事件的方法: $(DOMelement).click(function() {}); $(DOMelement).on('click',fu
jQuery .on ('click' ) 与 .click() 和 .delegate ('click' )
我习惯使用.click()和delegate('click') ，所以当我读到这两个在 jQuery 的最新版本中都被弃用时，我想我应该读一下它，但我有点摸不着头脑。文档 here似乎表明这是 .l
jquery - $(sel).bind ("click"、 $(sel).click(、 $(sel).live ("click"、 $(sel).on ("click"之间有什么显着差异？
我已经使用它们很长一段时间了，但大多数时候，我更喜欢较短的，但是，我只是想真正深入了解本质细节。我可能一直在创建有错误的代码，并且我不想在网络上贡献和传播懒惰完成的代码。所以，告诉我: What a
javascript - 有没有办法实现 "click"、 "double click"和 "click and hold"来处理同一元素？
我想实现类似在 Android 上点击 Instagram 中的帖子的功能(我认为在 iOS 上应该是相同的功能)。在 Instagram 中，如果有人点击照片，它会打开，双击，它会被喜欢，然后单击并
click - jquery click 事件只运行一次
我的点击事件有问题。它运行 1 次。示例: 我有 3 页(1 2 3)。当我点击 2 时它起作用了。然后在第 3 页，它又可以工作了。但我再次点击 2 不起作用。该事件未触发。 $("div .top
javascript - .off ('click' ) - 但我想再次返回 'click'
我正在尝试这样做。在 jsfiddle 中:http://jsfiddle.net/QGGhW/2/ 但是在我点击 not now 之后，下一个文本输入就不再可点击了。我该怎么做？是否有类似 .on
jquery .live ('click' ) 与 .click()
我想知道是否有任何情况下使用 .click(function {...}); 而不是 .live('click', function { ...});? 据我所知，实时选项似乎是一个更好的选择，因此我
javascript - .click() 在嵌套在 .click() 元素内部的元素上
我正在尝试在 Accordion 内部创建一个 Accordion ......并且我有点挣扎。本质上，我有一个 div .applicant，单击它会添加一个 .expand 类，它将高度设置为
jquery .on ("click")在 .off ("click")之后不起作用
我可以使用一些帮助来调试这个: var factBody = jQuery(".fact__body"); jQuery(".fact").on("click", function() { j
jQuery if click 包含 clicked 类
如果我有一个用于 clicked 类的监听器，以及另一个用于 click-option-1、click-option-2 类的监听器，以及click-option-3，如何在我的 clicked 事件
jquery - .on ('click' ) 与 .click() 之间的区别
下面的代码有什么区别吗？ $('#whatever').on('click', function() { /* your code here */ }); 和 $('#whatever').
jquery - .on ('click' ) VS 'selector.click
关闭。这个问题是opinion-based 。目前不接受答案。想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 . 已关闭 9 年前。 Improv
javascript - jQuery on(click)/click 事件未触发
我不擅长 UI 设计，所以我使用 bootstrap 和 jquery 来帮助我一点。我正在尝试将 jQuery 事件绑定(bind)到导航栏，因此当用户单击导航栏上的 p 标签时，它应该触发单击事件
jquery - click() 函数中的 click() 函数不起作用
问题是，当我单击 delaccbut 按钮时，单击功能起作用并显示消息，但是当我单击 confdel 或 redel 按钮来自 click 函数，它不...为什么？ HTML: Delete my
javascript - jQuery .click()/.on ("click"...) 我需要帮助在交替点击时交换文本
我想要完成的是“类似”的东西 $("button .toggleExcerpt) .toggle( function FIRST() { do first function..
javascript - click() 中的函数在设置元素的 click 方法后执行
function show1(){ $("#btn").click(show2()); window.alert(
javascript - .click/.on ('click' 内的 IF 语句不起作用
我不明白为什么这不起作用。当我单击具有该类名的复选框时，clickId 被赋予值access-toggle-all，所以这没有意义(至少对我来说).. $(document).ready(functi
javascript - 如何在触发另一个 click() 时清除 click()？
我有一个关于 click() 的复杂问题。我有 4 个按钮，分别命名为功能 1、功能 2、方法 1 和方法 2。 Function 1 Function 2 Method 1 Method 2 当单
javascript - this.click() 和 $(this).click() 有什么区别？
最后，我认为这不是我特别需要解决的问题，但我不明白为什么会这样，这让我很困扰。基本上，我有一些复选框，我只希望用户能够选择其中的一定数量。我正在使用下面的代码来实现该效果。 $j( function

首页

博学

6Ren·AI

商城

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