Question

我的输入框带有加号和减号按钮
如果输入框达到值50，我想要的是显示div pete (display: block) 我尝试使用keyup但它只能在你手动输入50值并且不使用加减按钮时才有效（在我的情况下，我已经禁用了输入）。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<p id="pete" style="display:none;">Pete</p>
<div class="sp-quantity">

  <div class="sp-minus fff"> <a class="ddd" href="#">-</a>
  </div>
  <div class="sp-input">
    <input type="text" class="quntity-input" value="52" disabled />
  </div>
  <div class="sp-plus fff"> <a class="ddd" href="#">+</a>
  </div>
</div>

Jquery的：

$(".ddd").on("click", function() {
  var $button = $(this);
  var oldValue = $button.closest('.sp-quantity').find("input.quntity-input").val();

  if ($button.text() == "+") {
    var newVal = parseFloat(oldValue) + 1;
  } else {
    // Don't allow decrementing below zero
    if (oldValue > 0) {
      var newVal = parseFloat(oldValue) - 1;
    } else {
      newVal = 0;
    }
  }

  $button.closest('.sp-quantity').find("input.quntity-input").val(newVal);

});
$(".quntity-input").keyup(function() {
  if (this.value == "50") {
    $("#pete").css("display", "block");
  } else {
    $("#pete").css("display", "none");
  }
});

CSS ：

.sp-quantity {
  width: 124px;
  height: 42px;
  font-family: "ProximaNova Bold", Helvetica, Arial;
}

.sp-minus {
  width: 40px;
  height: 40px;
  border: 1px solid #e1e1e1;
  float: left;
  text-align: center;
}

.sp-input {
  width: 40px;
  height: 40px;
  border: 1px solid #e1e1e1;
  border-left: 0px solid black;
  float: left;
}

.sp-plus {
  width: 40px;
  height: 40px;
  border: 1px solid #e1e1e1;
  border-left: 0px solid #e1e1e1;
  float: left;
  text-align: center;
}

.sp-input input {
  width: 30px;
  height: 34px;
  text-align: center;
  font-family: "ProximaNova Bold", Helvetica, Arial;
  border: none;
}

.sp-input input:focus {
  border: 1px solid #e1e1e1;
  border: none;
}

.sp-minus a,
.sp-plus a {
  display: block;
  width: 100%;
  height: 100%;
  padding-top: 5px;
}

Answer 1

一些调整，你就在那里。我认为最好通过输入中的自定义事件来实现。查看我的fiddle。

var $button = $(this);
var inputControl =  $button.closest('.sp-quantity').find("input.quntity-input");
var oldValue = inputControl.val();

if ($button.text() == "+") {
    var newVal = parseFloat(oldValue) + 1;
} else {
    // Don't allow decrementing below zero
    if (oldValue > 0) {
        var newVal = parseFloat(oldValue) - 1;
    } else {
        newVal = 0;
    }
}

if (newVal != oldValue) {
    inputControl.val(newVal);
     inputControl.trigger( 'value-updated');
}


});

$(".ddd").closest('.sp-quantity').find("input.quntity-input").on( 'value-updated', function() {
    if ($(this).val() == "50" ) {
    $('p#pete').show();
  } else {
    $('p#pete').hide();
  }
});

$(".quntity-input").keyup(function() {
    if (this.value == "50") {
        $("#pete").css("display", "block");
    }
    else {
        $("#pete").css("display", "none");
    }
});

如果输入值具有specfic文本，则更改CSS（使用加减按钮）

1 个答案: