javascript - 如果使用增量按钮填充文本输入，则为 keyup 函数

Question

我需要的是：.qty'仅在输入有值且大于 0时才显示模态。

现在：第一个功能（隐藏/显示模式）仅在我在输入中键入值时才有效。增量按钮在输入内放置一个字符串，但该函数似乎无法将该字符串识别为值，并且仅当我在输入内键入一个值时，用于显示/隐藏模态的函数才有效。

$(".qty").keyup(function() {
  var modal = $(".modal");
   if (parseFloat(modal) !== 0) {
    $(".pay__button").on("click", function() {
      $(modal).toggleClass("modal--show");
    });

    $(".modal__overlay").on("click", function() {
      $(modal).toggleClass("modal--show");
    });

    $(".modal__close").on("click", function() {
      $(modal).toggleClass("modal--show");
    });
  }
});

$(".count").each(function() {
  $(this).data("val", $(this).text());
}),
  $(document).on("click", ".qtyplus", function(t) {
        $(this)
          .closest(".items__cart")
          .find("input[name='quantity']")
          .val()
       +
        1
     {
        ($parent = $(this).closest(".items__cart")),
        (fieldName = $(this).attr("field"));
      var n = parseInt($parent.find("input[name=" + fieldName + "]").val());
      isNaN(n)
        ? $parent.find("input[name='" + fieldName + "']").val(1)
        : $parent.find("input[name='" + fieldName + "']").val(n + 1),
        updateCount(
          $parent.find(".count"),
          $parent.find("input[name='" + fieldName + "']")
        );
    }
  }),
  $(document).on("click", ".qtyminus", function(t) {
        $(this)
          .closest(".items__cart")
          .find("input[name='quantity']")
          .val()
       -
        1 >
      0
     {
      t.preventDefault(),
        ($parent = $(this).closest(".items__cart")),
        (fieldName = $(this).attr("field"));
      var n = parseInt($parent.find("input[name=" + fieldName + "]").val());
      !isNaN(n) && 0 < n
        ? $parent.find("input[name=" + fieldName + "]").val(n - 1)
        : $parent.find("input[name=" + fieldName + "]").val(0),
        updateCount(
          $parent.find(".count"),
          $parent.find("input[name=" + fieldName + "]")
        );
    }
  });

.modal__overlay {
  background: rgba(255, 255, 255, .5);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modal {
  visibility: hidden;
  z-index: 99999;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.modal__dialogue {
  background: blue;
  width: 32rem;
  position: absolute;
  left: 50%;
  margin-left: -16rem;
  top: 6rem;
  min-height: 32rem;
}

.modal__close {
  position: absolute;
  right: 2rem;
  top: 2rem;
  text-decoration: none;
  display: none;
}

.modal--show {
  visibility: visible;
}

.modal--transition {
  -webkit-transform: scale(0.7);
  -moz-transform: scale(0.7);
  -ms-transform: scale(0.7);
  transform: scale(0.7);
  opacity: 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.modal--show .modal--transition {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="items__cart">
  <input type='text' autocomplete="off" placeholder='amount...' name='quantity' value='' class='qty' />
  <input type='button' value="-" class='qty-button qtyminus' field='quantity' />
  <input type='button' value="+" class='qty-button qtyplus' field='quantity' />
  <h4 class="count">200</h4>
</div>
<div class="modal">
  <div class="modal__overlay"></div>
  <div class="modal__dialogue modal--transition">TEST TEST
    <a class="modal__close" href="#">X</a>
  </div>
</div>

<a class="pay__button" href="#">Show Modal</a>

标签： javascriptjquery

Answer 1

你的问题很容易理解，但你的代码不是。如果我理解您的问题，您可以以更简化的方式实现这一目标。请注意加号按钮单击功能的简化代码。

您可以尝试以下方法：

$(".pay__button, .modal__overlay, .modal__close").on("click", function() {
  if ($('.qty').val().trim() != "" && Number($('.qty').val().trim()) > 0)
   $(".modal").toggleClass("modal--show");
});




$(".count").each(function() {
  $(this).data("val", $(this).text());
}),
  $(document).on("click", ".qtyplus", function(t) {
        var input = $(this).siblings('.qty');
        input.val(Number(input.val()) + 1);
        updateCount(
          //$parent.find(".count"),
          //$parent.find("input[name='" + fieldName + "']")
        );
  }),
  $(document).on("click", ".qtyminus", function(t) {
        $(this)
          .closest(".items__cart")
          .find("input[name='quantity']")
          .val()
       -
        1 >
      0
     {
      t.preventDefault(),
        ($parent = $(this).closest(".items__cart")),
        (fieldName = $(this).attr("field"));
      var n = parseInt($parent.find("input[name=" + fieldName + "]").val());
      !isNaN(n) && 0 < n
        ? $parent.find("input[name=" + fieldName + "]").val(n - 1)
        : $parent.find("input[name=" + fieldName + "]").val(0),
        updateCount(
          $parent.find(".count"),
          $parent.find("input[name=" + fieldName + "]")
        );
    }
  });
  
function updateCount(a, b){
}

.modal__overlay {
  background: rgba(255, 255, 255, .5);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modal {
  visibility: hidden;
  z-index: 99999;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.modal__dialogue {
  background: blue;
  width: 32rem;
  position: absolute;
  left: 50%;
  margin-left: -16rem;
  top: 6rem;
  min-height: 32rem;
}

.modal__close {
  position: absolute;
  right: 2rem;
  top: 2rem;
  text-decoration: none;
  display: none;
}

.modal--show {
  visibility: visible;
}

.modal--transition {
  -webkit-transform: scale(0.7);
  -moz-transform: scale(0.7);
  -ms-transform: scale(0.7);
  transform: scale(0.7);
  opacity: 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.modal--show .modal--transition {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="items__cart">
  <input type='text' autocomplete="off" placeholder='amount...' name='quantity' value="" class='qty' />
  <input type='button' value="-" class='qty-button qtyminus' field='quantity' />
  <input type='button' value="+" class='qty-button qtyplus' field='quantity' />
  <h4 class="count">200</h4>
</div>
<div class="modal">
  <div class="modal__overlay"></div>
  <div class="modal__dialogue modal--transition">TEST TEST
    <a class="modal__close" href="#">X</a>
  </div>
</div>

<a class="pay__button" href="#">Show Modal</a>