javascript - 为每个输入单独显示占位符文本

Question

我有以下代码:

    <div>
  <input data-maxsale="9" data-maxsaleid="27595" name="cart[3839][qty]" value="1" title="Qty" class="input-text qty" maxlength="12">
  <div class="maxsalenotifcation maxsaleid-27595">
    <p>
      placeholder
    </p>
  </div>
</div>
<div>
  <input data-maxsale="3" data-maxsaleid="27757" name="cart[3841][qty]" value="1" title="Qty" class="input-text qty" maxlength="12">
  <div class="maxsalenotifcation maxsaleid-27757">
    <p>
      placeholder
    </p>
  </div>
</div>

var maxSalInput = $('input[data-maxsaleid]');
$('.maxsalenotifcation').hide();

maxSaleInputs.each(function() {

  var maxSaleID = $(this).attr('data-maxsaleid');
  var maxSaleValue = $(this).val();
  var maxSaleQuantity = $(this).attr('data-maxsale');

  if (maxSaleValue > maxSaleQuantity) {
    $('.maxsalenotifcation .maxsaleid-' + maxSaleID).show();
  }

});

http://jsfiddle.net/bmpqo69g/

当输入值大于 maxSaleValue 时，我想为每个 maxsaleid 单独显示 placeholder。

如果需要，我可以修改 html 标记。

我该怎么做？

Answer 1

1. 此maxSaleInputs变量尚未定义。
2. 您应该像这样定义多个类 $('.maxsalenotifcation.maxsaleid-' + maxSaleID)(类之间没有空格)

代码片段:

$(function() {
  var maxSalInput = $('input[data-maxsaleid]');
  $('.maxsalenotifcation').hide();

  maxSalInput.each(function() {

    var maxSaleID = $(this).attr('data-maxsaleid');
    var maxSaleValue = parseInt($(this).val());
    var maxSaleQuantity = parseInt($(this).attr('data-maxsale'));

    if (maxSaleValue > maxSaleQuantity) {
      $('.maxsalenotifcation.maxsaleid-' + maxSaleID).show();
    }

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div>
  <input data-maxsale="9" data-maxsaleid="27595" name="cart[3839][qty]" value="10" title="Qty" class="input-text qty" maxlength="12">
  <div class="maxsalenotifcation maxsaleid-27595">
    <p>
      placeholder
    </p>
  </div>
</div>
<div>
  <input data-maxsale="3" data-maxsaleid="27757" name="cart[3841][qty]" value="4" title="Qty" class="input-text qty" maxlength="12">
  <div class="maxsalenotifcation maxsaleid-27757">
    <p>
      placeholder
    </p>
  </div>
</div>