Question

我正在尝试使用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');

但这不是按钮，当我使用按钮并将我设置为Disabled属性时，光标会变为禁止信号，而我则不需要。

如何防止多次点击？

是的，我在互联网上以及在这个论坛上都阅读了很多信息，但是我不能阻止多次点击。

Answer 1

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

Answer 2

我为您提供了以下改进的导航功能：

仅使用“向左”和“向右”严格导航
防止在导航按钮上发送垃圾邮件
您可以使用.contenido-slider添加无限的幻灯片
您可以调整幻灯片的淡入淡出速度

在 HTML 中，我从display:none上删除了.contenido-slider

在 CSS 中，我更改了此部分：

.contenido-slider {
  background-color: #d0d2ff;
  width: 100%;
  height: 250px;
  display: none;
}

.contenido-slider.activo {
  display: block;
}

$(document).ready(function() {
  $("#arrow-right").click(navigation('right'));
  $("#arrow-left").click(navigation('left'));
});

function navigation(direction) {

  return function(e) {

    /**
     * Accept only "left" or "right"
     */

    if (typeof direction === 'undefined' || ['left', 'right'].indexOf(direction) === -1) {
      direction = 'left'; // previous
    }

    var slider = $("#slider");
    var preventSpamClass = 'animation-in-progress';

    if (!slider.hasClass(preventSpamClass)) {

      slider.addClass(preventSpamClass)

      var activeClass = 'activo';
      var elements = slider.children('.contenido-slider');
      var current = slider.children('.' + activeClass);
      var currentIndex = +current.index();
      var duration = 250;

      if (direction === 'left') {

        if (currentIndex - 1 < 0) {

          var nextElement = elements.last();

        } else {

          var nextElement = current.prev();

        }

      } else {

        if (currentIndex + 1 >= elements.length) {

          var nextElement = elements.first();

        } else {

          var nextElement = current.next();

        }

      }

      current.css({opacity: 1}).stop(true).animate({
        opacity: 0
      }, {
        duration: duration,
        complete: function() {
          current.removeClass(activeClass);

          nextElement.addClass(activeClass);

          nextElement.css({opacity: 0}).stop(true).animate({
            opacity: 1
          }, {
            duration: duration,
            complete: function() {
              slider.removeClass(preventSpamClass)
            }
          })

        }
      })

    }


  }

}

body {
  margin: 0;
}

#slider {
  width: 100%;
  height: 250px;
  position: relative;
}

.activo {
  display: block;
}

.contenido-slider {
  background-color: #d0d2ff;
  width: 100%;
  height: 250px;
  display: none;
}

.contenido-slider.activo {
  display: block;
}

.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">
      <span>2</span>
    </div>
    <div id="3" class="contenido-slider">
      <span>3</span>
    </div>
    <div id="4" class="contenido-slider">
      <span>4</span>
    </div>
    <div id="5" class="contenido-slider">
      <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>

Answer 3

添加一个变量并检查动画是否仍在运行：

var isAnimating = 0;

$("#arrow-right").click(function(){
    if (!isAnimating) {
      isAnimating = 1;
      nextPrevius(1);
    }
});

然后在每个fadeIn事件中添加一个回调函数：

$("#5").fadeIn("slow", function(){
   isAnimating = 0;
});

Answer 4

替换

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

带有以下内容

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

Answer 5

您可以使用动画来显示/显示单击的div，例如：

$(document).ready(function() {
  $("#arrow-right").click(function() {
    nextPrevius(1);
  });
  $("#arrow-left").click(function() {
    nextPrevius(-1);
  });
});

function nextPrevius(value) {
  var buttons = $('#arrow-left,#arrow-right');

  buttons.hide();
  setTimeout(function() {
    buttons.show();
  }, 1000);

  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>

Answer 6

解决方案是对该代码进行一些逻辑处理，让我逐步介绍您，首先，您需要了解此处发生的情况：一旦单击，您将触发包含一个fadeIn函数的nextPrevius函数，因此基本上来说，nextPrevius仅在动画完成后才结束，因此，如果单击几次，则将一个接一个地触发多个动画，这是一个超级简单的解决方案为此，请使用布尔值，让我告诉您您需要做什么：

<?php

//Our MySQL connection details.
$host = 'mysql_server';
$user = 'user';
$password = 'password';
$database = 'database';

//Connect to MySQL using PDO.
$pdo = new PDO("mysql:host=$host;dbname=$database", $user, $password);

//Create our SQL query.
$sql = "SELECT 
    a.InvoiceNumber, a.partnumber, a.Quantity, b.Discount, date
FROM
    data a,
    mars b
WHERE
    a.PartNumber = b.partnumber
        AND date >= '2018-09-28'
        AND mfg = 'gk'
        AND discount <> '0.00'
        AND CustomerNumber IN ('Z5447520' , 'Z3715177', 'Z1234444', 'Z5425966')
        AND Quantity > '0'";

//Prepare our SQL query.
$statement = $pdo->prepare($sql);

//Executre our SQL query.
$statement->execute();

//Fetch all of the rows from our MySQL table.
$rows = $statement->fetchAll(PDO::FETCH_ASSOC);

//Get the column names.
$columnNames = array();
if(!empty($rows)){
    //We only need to loop through the first row of our result
    //in order to collate the column names.
    $firstRow = $rows[0];
    foreach($firstRow as $colName => $val){
        $columnNames[] = $colName;
    }
}

//Setup the filename that our CSV will have when it is downloaded.
$fileName = 'mysql-export.csv';

//Set the Content-Type and Content-Disposition headers to force the download.
header('Content-Type: application/excel');
header('Content-Disposition: attachment; filename="' . $fileName . '"');

//Open up a file pointer
$fp = fopen('php://output', 'w');

//Start off by writing the column names to the file.
fputcsv($fp, $columnNames);

//Then, loop through the rows and write them to the CSV file.
foreach ($rows as $row) {
    fputcsv($fp, $row);
}

//Close the file pointer.
fclose($fp);

基本上，我创建了一个名为 LagProtector 的布尔值，然后将所有负责动画的代码放入滑块中，以检查是否已触发 LagProtector ，如果没有，请将 LagProtector 设置为true，然后在函数结尾将其设置为false。因此它将忽略动画仍在运行时的点击次数。简单容易。

防止多次点击.click（）

6 个答案: