如果使用增量按钮填充文本输入，则具有键入功能

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>

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>

Answer 2

您的代码面临许多挑战，我设置了模式显示/隐藏切换并对其进行了简化。我添加了一个change事件，以便单击按钮就可以触发该事件。

我附加到div而不是文档，因此可以使用它，并使用event.delegateTarget使代码更简单，因此可以避免DOM遍历。

// handle keyup and change
$(".qty").on('keyup change', function() {
  var qtyVal = $(this).val();
  var qtyNum = parseFloat(qtyVal);
  $(".modal").toggleClass("modal--show", qtyNum > 0);
});
// handle all these
$(".pay__button, .modal__overlay, .modal__close").on("click", function() {
  $(".modal").toggleClass("modal--show");
});

// no clue why this is here
$(".count").each(function() {
  $(this).data("val", $(this).text());
});

$('.items__cart').on("click", ".qtyplus", function(event) {
  let $parent = $(event.delegateTarget);
  let fieldName = "input[name='" + $(this).attr("field") + "']";
  let quantityField = $parent.find(fieldName);
  let n = parseInt(quantityField.val(), 10);
  isNaN(n) ?
    quantityField.val(1) :
    quantityField.val(n + 1);
  quantityField.trigger('change');
  updateCount($parent.find(".count"), quantityField);
});
$('.items__cart').on("click", ".qtyminus", function(event) {
  let $parent = $(event.delegateTarget);
  let fieldName = "input[name='" + $(this).attr("field") + "']";
  let quantityField = $parent.find(fieldName);
  let n = parseInt(quantityField.val(), 10);
  !isNaN(n) && 0 < n ?
    quantityField.val(n - 1) :
    quantityField.val(0);
  quantityField.trigger('change');
  updateCount($parent.find(".count"), quantityField);
});

function updateCount(cnt, quantityField) {
  //do whatever
}

.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>