加/减编号

Question

我正在努力在输入字段中添加/减去数字。

但是，我希望结果显示在<p class="qty1"></p>中而不是input字段中。

我尝试自己使用innerHTML完成此操作，但无法正常工作。

$(function() {
  $('.minus,.add').on('click', function() {
    var $qty = $(this).closest('.form-height').find('.qty'),
    currentVal = parseInt($qty.val()),
    isAdd = $(this).hasClass('add');
    !isNaN(currentVal) && $qty.val(
    isAdd ? ++currentVal : (currentVal > 0 ? --currentVal : currentVal)
    );
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="form-height">
  <input id="qty1" type="text" readonly value="5" class="qty form-control" />
  <p class="qty1"></p>
  <img src="images/minus.png" id="minus1" width="20" height="20" class="minus" />
  <img id="add1" src="images/plus.png" width="20" height="20" class="add" />                  
</div>
<hr />
<div class="form-height">
  <input id="qty2" type="text" readonly value="7" class="qty form-control" />
  <p class="qty2"></p>
  <img src="images/minus.png" id="minus1" width="20" height="20" class="minus" />
  <img id="add1" src="images/plus.png" width="20" height="20" class="add" />                  
</div>

Answer 1

如果我正确理解了您的问题，则此代码应执行您想要的操作：

$(function() {
  $('.minus,.add').on('click', function() {
    var $qty = $(this).closest('.form-height').find('.qty'),
    currentVal = parseInt($qty.val()),
    isAdd = $(this).hasClass('add');
    if (!isNaN(currentVal)) {
        newVal = isAdd ? ++currentVal : (currentVal > 0 ? --currentVal : currentVal);
        $p.text(newVal);
        $qty.val(newVal);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="form-height">
  <input id="qty1" type="text" readonly value="5" class="qty form-control" />
  <p class="qty1"></p>
  <img src="images/minus.png" id="minus1" width="20" height="20" class="minus" />
  <img id="add1" src="images/plus.png" width="20" height="20" class="add" />                  
</div>
<hr />
<div class="form-height">
  <input id="qty2" type="text" readonly value="7" class="qty form-control" />
  <p class="qty2"></p>
  <img src="images/minus.png" id="minus1" width="20" height="20" class="minus" />
  <img id="add1" src="images/plus.png" width="20" height="20" class="add" />                  
</div>

编辑：如果要完全删除<input>标记，则只需对您的代码进行少量修改即可：

$(function() {
  $('.minus,.add').on('click', function() {
    var $qty = $(this).closest('.form-height').find('.qty'),
    currentVal = parseInt($qty.text()),
    isAdd = $(this).hasClass('add');
    !isNaN(currentVal) && $qty.text(
    isAdd ? ++currentVal : (currentVal > 0 ? --currentVal : currentVal)
    );
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="form-height">
  <p class="qty">5</p>
  <img src="images/minus.png" id="minus1" width="20" height="20" class="minus" />
  <img id="add1" src="images/plus.png" width="20" height="20" class="add" />                  
</div>
<hr />
<div class="form-height">
  <p class="qty">7</p>
  <img src="images/minus.png" id="minus1" width="20" height="20" class="minus" />
  <img id="add1" src="images/plus.png" width="20" height="20" class="add" />                  
</div>

Answer 2

您可以使用.html（）或.text（）将值附加到p标签，如

$('.qty1').html(currentValue);

OR

$('.qty1').text(currentValue);

要了解两种方法Click here

的区别