Question

我正在尝试创建一个简单的微调插件，但遇到了问题。

重现该问题：

单击并按住“加号”或“减号”按钮。
达到max或min之后，该按钮将被禁用，并且您将收到一条消息，提示您达到最大值或最小值。
现在只需在另一侧单击一次，即可将旋转器增加或减少一个步骤。
现在再次单击并按住第一个按钮。
微调器将通过max或min一步，然后停止。

怎么了？

(function($) {
  $.fn.spiner = function() {
    $(this).each(function() {
      var errors = {
        min: "Looks like you are at Min ",
        max: "looks like you are at Max"
      };
      var temp = 0.0;
      var toUp = null;
      var ivUp = null;
      var toDown = null;
      var ivDown = null;
      var inc = $(this).find('.btn-add');
      var out = $(this).find('.btn-nums');
      var dec = $(this).find('.btn-less');
      var min = $(this).data('min');
      var max = $(this).data('max');
      var step = $(this).data('step');
      var type = $(this).data('type');
      var maxerr = $(this).data('maxerror');
      var minerr = $(this).data('minerror');

      function MaxStop() {
        if (temp >= max) {
          clearTimeout(toUp);
          clearInterval(ivUp);
          $('.btn-add').prop('disabled', true);
          $('.btn-less').prop('disabled', true);
          dec.prop('disabled', false);
          $('.result').html('<div class="alert alert-info animated fadeInUp" role="alert">' + errors.max + '</div>');
        }
      }

      function MinStop() {
        if (temp <= min) {
          clearTimeout(toDown);
          clearInterval(ivDown);
          $('.btn-add').prop('disabled', true);
          $('.btn-less').prop('disabled', true);
          inc.prop('disabled', false);
          $('.result').html('<div class="alert alert-secondary" role="alert">' + errors.min + '</div>');
        }
      }

      function MoreUp() {
        temp = temp + step;

        if (temp > 0) {
          out.html("+" + parseFloat(Math.round(temp * 100) / 100).toFixed(2));
        } else {
          out.html(parseFloat(Math.round(temp * 100) / 100).toFixed(2));
        }

        MaxStop();
      }

      function MoreDown() {
        temp = temp - step;
        if (temp > 0) {
          out.html("+" + parseFloat(Math.round(temp * 100) / 100).toFixed(2));
        } else {
          out.html(parseFloat(Math.round(temp * 100) / 100).toFixed(2));
        }


        MinStop();
      }
      inc.on("mousedown", function() {
          $(".btn-less").prop('disabled', false);
          $(".btn-add").prop('disabled', false);
          $('.result').children().addClass('fadeOutDown');
          temp = temp + step;

          if (temp > 0) {
            out.html("+" + parseFloat(Math.round(temp * 100) / 100).toFixed(2));
          } else {
            out.html(parseFloat(Math.round(temp * 100) / 100).toFixed(2));
          }


          toUp = setTimeout(function() {
            ivUp = setInterval(MoreUp, 75);
          }, 500);

        })
        .on("mouseup mouseleave", function() {
          clearTimeout(toUp);
          clearInterval(ivUp);
          MaxStop();
        });


      dec.on("mousedown", function() {
          $(".btn-less").prop('disabled', false);
          $(".btn-add").prop('disabled', false);
          $('.result').children().addClass('fadeOutDown');
          temp = temp - step;

          if (temp > 0) {
            out.html("+" + parseFloat(Math.round(temp * 100) / 100).toFixed(2));
          } else {
            out.html(parseFloat(Math.round(temp * 100) / 100).toFixed(2));
          }
          toDown = setTimeout(function() {
            ivDown = setInterval(MoreDown, 75);
          }, 500);
        })
        .on("mouseup mouseleave", function() {
          clearTimeout(toDown);
          clearInterval(ivDown);
          MinStop();
        });
    });
  }
}(jQuery));

$('.spiner').spiner();

body {
  padding-top: 10px;
}

.btn-prescriptis .btn {
  border-radius: 0px;
  max-height: 46px;
  cursor: pointer;
  width: 50px;
}

.btn-prescriptis .btn-nums {
  background: #fff !important;
  color: #555 !important;
  outline: none !important;
  box-shadow: none !important;
  width: 80px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="btn-group btn-prescriptis spiner" data-min="-6" data-max="3" data-step="0.25" data-maxerror="max" data-minerror="min">
  <button type="button" class="btn btn-secondary btn-less">-</button>
  <button type="button" class="btn btn-secondary btn-nums">0.00</button>
  <button type="button" class="btn btn-secondary btn-add">+</button>
</div>

<div class="container">
  <div class="col-12 result"></div>
</div>

Answer 1

我认为这是因为您是否一直都不会检查是否超过了最大值或最小值。为防止这种情况，我将在您的MoreUp()和MoreDown()函数中添加条件检查，以确保每次单击相应按钮时，您都不会超出限制。

换句话说，if (temp < max) {和if (temp > min) {，如下面的代码段所示。

(function($) {
  $.fn.spiner = function() {
    $(this).each(function() {
      var errors = {
        min: "Looks like you are at Min ",
        max: "looks like you are at Max"
      };
      var temp = 0.0;
      var toUp = null;
      var ivUp = null;
      var toDown = null;
      var ivDown = null;
      var inc = $(this).find('.btn-add');
      var out = $(this).find('.btn-nums');
      var dec = $(this).find('.btn-less');
      var min = $(this).data('min');
      var max = $(this).data('max');
      var step = $(this).data('step');
      var type = $(this).data('type');
      var maxerr = $(this).data('maxerror');
      var minerr = $(this).data('minerror');

      function MaxStop() {
        if (temp >= max) {
          clearTimeout(toUp);
          clearInterval(ivUp);
          $('.btn-add').prop('disabled', true);
          $('.btn-less').prop('disabled', true);
          dec.prop('disabled', false);
          $('.result').html('<div class="alert alert-info animated fadeInUp" role="alert">' + errors.max + '</div>');
        }
      }

      function MinStop() {
        if (temp <= min) {
          clearTimeout(toDown);
          clearInterval(ivDown);
          $('.btn-add').prop('disabled', true);
          $('.btn-less').prop('disabled', true);
          inc.prop('disabled', false);
          $('.result').html('<div class="alert alert-secondary" role="alert">' + errors.min + '</div>');
        }
      }

      function MoreUp() {
        if (temp < max) {
          temp = temp + step;

          if (temp > 0) {
            out.html("+" + parseFloat(Math.round(temp * 100) / 100).toFixed(2));
          } else {
            out.html(parseFloat(Math.round(temp * 100) / 100).toFixed(2));
          }

          MaxStop();
        }
      }

      function MoreDown() {
        if (temp > min) {
          temp = temp - step;
          if (temp > 0) {
            out.html("+" + parseFloat(Math.round(temp * 100) / 100).toFixed(2));
          } else {
            out.html(parseFloat(Math.round(temp * 100) / 100).toFixed(2));
          }


          MinStop();
        }
      }
      inc.on("mousedown", function() {
          $(".btn-less").prop('disabled', false);
          $(".btn-add").prop('disabled', false);
          $('.result').children().addClass('fadeOutDown');
          temp = temp + step;

          if (temp > 0) {
            out.html("+" + parseFloat(Math.round(temp * 100) / 100).toFixed(2));
          } else {
            out.html(parseFloat(Math.round(temp * 100) / 100).toFixed(2));
          }


          toUp = setTimeout(function() {
            ivUp = setInterval(MoreUp, 75);
          }, 500);

        })
        .on("mouseup mouseleave", function() {
          clearTimeout(toUp);
          clearInterval(ivUp);
          MaxStop();
        });


      dec.on("mousedown", function() {
          $(".btn-less").prop('disabled', false);
          $(".btn-add").prop('disabled', false);
          $('.result').children().addClass('fadeOutDown');
          temp = temp - step;

          if (temp > 0) {
            out.html("+" + parseFloat(Math.round(temp * 100) / 100).toFixed(2));
          } else {
            out.html(parseFloat(Math.round(temp * 100) / 100).toFixed(2));
          }
          toDown = setTimeout(function() {
            ivDown = setInterval(MoreDown, 75);
          }, 500);
        })
        .on("mouseup mouseleave", function() {
          clearTimeout(toDown);
          clearInterval(ivDown);
          MinStop();
        });
    });
  }
}(jQuery));

$('.spiner').spiner();

body {
  padding-top: 10px;
}

.btn-prescriptis .btn {
  border-radius: 0px;
  max-height: 46px;
  cursor: pointer;
  width: 50px;
}

.btn-prescriptis .btn-nums {
  background: #fff !important;
  color: #555 !important;
  outline: none !important;
  box-shadow: none !important;
  width: 80px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="btn-group btn-prescriptis spiner" data-min="-6" data-max="3" data-step="0.25" data-maxerror="max" data-minerror="min">
  <button type="button" class="btn btn-secondary btn-less">-</button>
  <button type="button" class="btn btn-secondary btn-nums">0.00</button>
  <button type="button" class="btn btn-secondary btn-add">+</button>
</div>

<div class="container">
  <div class="col-12 result"></div>
</div>

按钮Mousedown不会在断点处停止

1 个答案: